{ "id": "mod_recipe_browser", "type": "module", "version": "1.0", "context": { "title": "Recipe Browser", "icon": "🍽️", "layout": "tablet" }, "state": { "recipes": [], "total": 0, "search": "", "selectedId": 0, "checkedIngredients": [], "isLoading": true, "error": "", "focused": "" }, "dependencies": [ { "repository": { "remote": { "id": "repo_recipes_api", "config": { "endPoint": "https://dummyjson.com/recipes" } } } }, { "action": { "repo": { "id": "act_fetch_recipes", "input": { "repositoryId": "repo_recipes_api", "operation": "read", "params": { "body": { "limit": 30, "select": "name,cuisine,image,prepTimeMinutes,cookTimeMinutes,rating,difficulty,servings,ingredients,instructions,caloriesPerServing" } } }, "output": { "success": [ { "state": { "id": "act_apply_recipes", "input": { "recipes": "@{act_fetch_recipes.recipes}", "total": "@{act_fetch_recipes.total}", "selectedId": "{{ count(@{act_fetch_recipes.recipes}) > 0 ? first(@{act_fetch_recipes.recipes}).id : 0 }}", "checkedIngredients": [], "isLoading": false, "error": "" } } } ], "failure": [ { "state": { "id": "act_fetch_failed", "input": { "isLoading": false, "error": "{{ 'Request failed' + (notEmpty(@{act_fetch_recipes.message}) ? ': ' + @{act_fetch_recipes.message} : '. Check your network and try again.') }}" } } } ] } } } } ], "children": [ { "id": "recipes_root_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${error}) && empty(${recipes}) }}", "_trueComponent": { "id": "recipes_error_wrap", "type": "vstack", "context": { "_spacing": 24, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 24, "bottom": 24, "leading": 24, "trailing": 24 } }, "common": { "background": { "gradient": { "linear": { "colors": [ { "light": "#F7F2EA", "dark": "#161211" }, { "light": "#EFE4D6", "dark": "#282321" } ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } }, "children": [ { "id": "recipes_error_spacer_top", "type": "spacer" }, { "id": "recipes_error_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": 520, "padding": 24 }, "common": { "background": { "light": "#FFFFFF", "dark": "#1E1A18" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.14 }, "radius": 16, "y": 8 } }, "children": [ { "id": "recipes_error_icon", "type": "image", "context": { "_source": "sf://wifi.exclamationmark" }, "style": { "layout": { "width": 42, "height": 42 }, "common": { "foreground": "#C76B3D" } } }, { "id": "recipes_error_title", "type": "text", "context": { "_text": "Couldn't load recipes" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } }, { "id": "recipes_error_text", "type": "text", "context": { "_text": "${error}" }, "style": { "common": { "font": "body", "foreground": { "light": "#6E5A52", "dark": "#D8C7BF" } }, "text": { "multilineTextAlignment": "center" } } }, { "id": "recipes_retry_btn", "type": "button", "context": { "_label": "Retry", "_image": "sf://arrow.clockwise" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "padding": { "top": 6 } } }, "events": { "onTap": [ { "state": { "id": "act_retry_loading", "input": { "isLoading": true, "error": "", "focused": "" }, "output": { "success": [ { "template": { "id": "act_retry_fetch", "input": "act_fetch_recipes" } } ] } } } ] } } ] }, { "id": "recipes_error_spacer_bottom", "type": "spacer" } ] }, "_falseComponent": { "id": "recipes_split", "type": "splitview", "context": { "_columnVisibility": "all" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "splitView": { "preferred": "balanced", "visibility": "all", "sidebarWidth": { "min": 300, "ideal": 360, "max": 420 } }, "common": { "background": { "gradient": { "linear": { "colors": [ { "light": "#F7F2EA", "dark": "#161211" }, { "light": "#F2E7DB", "dark": "#231B18" } ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } }, "children": [ { "id": "recipes_sidebar", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 18, "bottom": 18, "leading": 18, "trailing": 14 } } }, "children": [ { "id": "recipes_search_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FFFFFF", "dark": "#1E1A18" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.08 }, "radius": 12, "y": 6 } }, "children": [ { "id": "recipes_search_field", "type": "textfield", "context": { "_label": "Search recipes", "_text": "${search}", "_focused": "${focused}", "_debounce": 0.1 }, "style": { "textField": { "standard": "roundedBorder" }, "layout": { "maxWidth": "infinity" }, "common": { "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } }, { "id": "recipes_search_hint", "type": "text", "context": { "_text": "{{ empty(trim(${search})) ? (cast(${total}, 'str') + ' recipes loaded') : ('Filtering by name: ' + ${search}) }}" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } } ] }, { "id": "recipes_list_card", "type": "list", "context": { "_isLoading": "${isLoading}", "_skeletonRows": 9 }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "common": { "background": { "light": "#FFFFFF", "dark": "#1E1A18" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.08 }, "radius": 12, "y": 6 }, "section": { "listRowBackground": "clear" } }, "children": [ { "id": "recipes_list_dynamic", "type": "dynamic", "context": { "_data": "{{ empty(trim(${search})) ? ${recipes} : ${recipes[name ~ ${search}]} }}" }, "prototype": { "id": "recipes_list_row_btn", "type": "button", "context": { "_label": "" }, "style": { "button": { "standard": { "type": "plain", "shape": "automatic" } }, "common": { "background": "{{ @{item.id} == ${selectedId} ? { 'gradient': { 'linear': { 'colors': ['#D98C5F', '#B85C38'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } : { 'light': '#FFFFFF', 'dark': '#1E1A18' } }}", "cornerRadius": 16 }, "layout": { "maxWidth": "infinity", "padding": { "top": 8, "bottom": 8, "leading": 8, "trailing": 8 } } }, "children": [ { "id": "recipes_list_row_body", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 4, "bottom": 4, "leading": 4, "trailing": 4 } } }, "children": [ { "id": "recipes_list_thumb", "type": "image", "context": { "_source": "@{item.image}", "_contentMode": "fill" }, "style": { "layout": { "width": 72, "height": 72 }, "common": { "cornerRadius": 14 } } }, { "id": "recipes_list_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_list_name", "type": "text", "context": { "_text": "@{item.name}" }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": "{{ @{item.id} == ${selectedId} ? { 'color': 'white' } : { 'light': '#231815', 'dark': '#FFF8F2' } }}" }, "text": { "lineLimit": 2 } } }, { "id": "recipes_list_meta", "type": "text", "context": { "_text": "{{ @{item.cuisine} + ' · ★ ' + cast(@{item.rating}, 'str') }}" }, "style": { "common": { "font": "subheadline", "foreground": "{{ @{item.id} == ${selectedId} ? { 'color': { 'color': 'white', 'opacity': 0.86 } } : { 'color': 'secondary' } }}" }, "text": { "lineLimit": 1 } } } ] } ] } ], "events": { "onTap": [ { "state": { "id": "act_select_recipe", "input": { "selectedId": "@{item.id}", "checkedIngredients": [], "focused": "" } } } ] } } } ] } ] }, { "id": "recipes_detail_wrap", "type": "conditional", "context": { "_condition": "${isLoading}", "_trueComponent": { "id": "recipes_detail_loading", "type": "scroll", "context": { "_axis": "vertical" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 18, "bottom": 18, "leading": 14, "trailing": 18 } } }, "children": [ { "id": "recipes_detail_loading_card", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "light": "#FFFFFF", "dark": "#1E1A18" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.08 }, "radius": 12, "y": 6 } }, "children": [ { "id": "recipes_detail_skeleton", "type": "dynamic", "context": { "_data": [], "_isLoading": "${isLoading}", "_skeletonRows": 1 }, "prototype": { "id": "recipes_detail_skeleton_card", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_skeleton_image", "type": "image", "context": { "_source": "sf://photo", "_contentMode": "fill" }, "style": { "layout": { "maxWidth": "infinity", "height": 280 }, "common": { "cornerRadius": 20 } } }, { "id": "recipes_detail_skeleton_header", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_skeleton_title_row", "type": "hstack", "context": { "_spacing": 0, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_skeleton_title", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 260 }, "common": { "font": { "kind": "title2", "weight": "bold" } } } }, { "id": "recipes_detail_skeleton_title_row_spacer", "type": "spacer" } ] }, { "id": "recipes_detail_skeleton_subtitle_row", "type": "hstack", "context": { "_spacing": 0, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_skeleton_subtitle", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 170 }, "common": { "font": { "kind": "subheadline" } } } }, { "id": "recipes_detail_skeleton_subtitle_row_spacer", "type": "spacer" } ] } ] }, { "id": "recipes_detail_skeleton_stats", "type": "grid", "context": { "_gridType": "lazyVGrid", "_spacing": 12 }, "style": { "grid": { "columns": [ { "kind": "flexible", "minimum": 160, "maximum": 320, "spacing": 12 }, { "kind": "flexible", "minimum": 160, "maximum": 320, "spacing": 12 } ] }, "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_skeleton_stat_1", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_detail_skeleton_stat_1_label", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 70 }, "common": { "font": { "kind": "caption" } } } }, { "id": "recipes_detail_skeleton_stat_1_value", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 110 }, "common": { "font": { "kind": "headline", "weight": "semibold" } } } } ] }, { "id": "recipes_detail_skeleton_stat_2", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_detail_skeleton_stat_2_label", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 70 }, "common": { "font": { "kind": "caption" } } } }, { "id": "recipes_detail_skeleton_stat_2_value", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 110 }, "common": { "font": { "kind": "headline", "weight": "semibold" } } } } ] }, { "id": "recipes_detail_skeleton_stat_3", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_detail_skeleton_stat_3_label", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 70 }, "common": { "font": { "kind": "caption" } } } }, { "id": "recipes_detail_skeleton_stat_3_value", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 110 }, "common": { "font": { "kind": "headline", "weight": "semibold" } } } } ] }, { "id": "recipes_detail_skeleton_stat_4", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_detail_skeleton_stat_4_label", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 70 }, "common": { "font": { "kind": "caption" } } } }, { "id": "recipes_detail_skeleton_stat_4_value", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 110 }, "common": { "font": { "kind": "headline", "weight": "semibold" } } } } ] } ] }, { "id": "recipes_detail_skeleton_section", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FCF8F2", "dark": "#241D1A" }, "cornerRadius": 20 } }, "children": [ { "id": "recipes_detail_skeleton_section_title", "type": "text", "context": { "_text": " " }, "style": { "layout": { "width": 190 }, "common": { "font": { "kind": "headline", "weight": "semibold" } } } }, { "id": "recipes_detail_skeleton_line_1", "type": "text", "context": { "_text": " " }, "style": { "layout": { "maxWidth": "infinity" }, "common": { "font": { "kind": "body" } } } }, { "id": "recipes_detail_skeleton_line_2", "type": "text", "context": { "_text": " " }, "style": { "layout": { "maxWidth": "infinity" }, "common": { "font": { "kind": "body" } } } }, { "id": "recipes_detail_skeleton_line_3", "type": "text", "context": { "_text": " " }, "style": { "layout": { "maxWidth": "infinity" }, "common": { "font": { "kind": "body" } } } } ] } ] } } ] } ] }, "_falseComponent": { "id": "recipes_detail_scroll", "type": "scroll", "context": { "_axis": "vertical", "selectedRecipe": "{{ first(${recipes[id == ${selectedId}]}) }}" }, "selectedRecipe": "{{ first(${recipes[id == ${selectedId}]}) }}", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 18, "bottom": 18, "leading": 14, "trailing": 18 } } }, "children": [ { "id": "recipes_detail_card", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "light": "#FFFFFF", "dark": "#1E1A18" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.08 }, "radius": 12, "y": 6 } }, "children": [ { "id": "recipes_detail_error_inline", "type": "conditional", "context": { "_condition": "{{ notEmpty(${error}) }}", "_trueComponent": { "id": "recipes_detail_error_banner", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 12, "bottom": 12, "leading": 14, "trailing": 14 } }, "common": { "background": { "light": "#FFF1EB", "dark": "#34211C" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_detail_error_banner_icon", "type": "image", "context": { "_source": "sf://exclamationmark.triangle.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "#C76B3D" } } }, { "id": "recipes_detail_error_banner_text", "type": "text", "context": { "_text": "${error}" }, "style": { "layout": { "maxWidth": "infinity" }, "common": { "font": "subheadline", "foreground": { "light": "#7A3E2B", "dark": "#F4C6B1" } } } }, { "id": "recipes_detail_retry_inline_btn", "type": "button", "context": { "_label": "Retry" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "act_retry_inline_loading", "input": { "isLoading": true, "error": "", "focused": "" }, "output": { "success": [ { "template": { "id": "act_retry_inline_fetch", "input": "act_fetch_recipes" } } ] } } } ] } } ] }, "_falseComponent": { "id": "recipes_detail_error_none", "type": "empty" } } }, { "id": "recipes_detail_image", "type": "image", "context": { "_source": "@{selectedRecipe.image}", "_contentMode": "fill" }, "style": { "layout": { "maxWidth": "infinity", "height": 280 }, "common": { "cornerRadius": 20 } } }, { "id": "recipes_detail_header", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_detail_name", "type": "text", "context": { "_text": "@{selectedRecipe.name}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } }, { "id": "recipes_detail_cuisine", "type": "text", "context": { "_text": "{{ @{selectedRecipe.cuisine} + ' · ★ ' + cast(@{selectedRecipe.rating}, 'str') }}" }, "style": { "common": { "font": "subheadline", "foreground": "secondary" } } } ] }, { "id": "recipes_detail_stats_grid", "type": "grid", "context": { "_gridType": "lazyVGrid", "_spacing": 12 }, "style": { "grid": { "columns": [ { "kind": "flexible", "minimum": 160, "maximum": 320, "spacing": 12 }, { "kind": "flexible", "minimum": 160, "maximum": 320, "spacing": 12 } ] }, "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "recipes_stat_difficulty", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_stat_difficulty_label", "type": "label", "context": { "_title": "Difficulty", "_image": "sf://dial.medium" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_stat_difficulty_value", "type": "text", "context": { "_text": "@{selectedRecipe.difficulty}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] }, { "id": "recipes_stat_servings", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_stat_servings_label", "type": "label", "context": { "_title": "Servings", "_image": "sf://person.2.fill" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_stat_servings_value", "type": "text", "context": { "_text": "{{ cast(@{selectedRecipe.servings}, 'str') }}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] }, { "id": "recipes_stat_prep", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_stat_prep_label", "type": "label", "context": { "_title": "Prep time", "_image": "sf://timer" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_stat_prep_value", "type": "text", "context": { "_text": "{{ cast(@{selectedRecipe.prepTimeMinutes}, 'str') + ' min' }}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] }, { "id": "recipes_stat_cook", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_stat_cook_label", "type": "label", "context": { "_title": "Cook time", "_image": "sf://flame.fill" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_stat_cook_value", "type": "text", "context": { "_text": "{{ cast(@{selectedRecipe.cookTimeMinutes}, 'str') + ' min' }}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] }, { "id": "recipes_stat_calories", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "light": "#F8F2EA", "dark": "#2A211E" }, "cornerRadius": 16 } }, "children": [ { "id": "recipes_stat_calories_label", "type": "label", "context": { "_title": "Calories", "_image": "sf://bolt.heart.fill" }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_stat_calories_value", "type": "text", "context": { "_text": "{{ cast(@{selectedRecipe.caloriesPerServing}, 'str') + ' kcal / serving' }}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] } ] }, { "id": "recipes_ingredients_section", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FCF8F2", "dark": "#241D1A" }, "cornerRadius": 20 } }, "children": [ { "id": "recipes_ingredients_header", "type": "label", "context": { "_title": "Ingredients checklist", "_image": "sf://checklist" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } }, { "id": "recipes_ingredients_hint", "type": "text", "context": { "_text": "Tick ingredients as you gather them." }, "style": { "common": { "font": "caption", "foreground": "secondary" } } }, { "id": "recipes_ingredients_dynamic", "type": "dynamic", "context": { "_data": "@{selectedRecipe.ingredients}" }, "prototype": { "id": "recipes_ingredient_row_btn", "type": "button", "context": { "_label": "" }, "style": { "button": { "standard": { "type": "plain", "shape": "automatic" } }, "common": { "background": "{{ ${checkedIngredients} ~ @{item} ? { 'light': '#E8F6ED', 'dark': '#183024' } : { 'light': '#FFFFFF', 'dark': '#1B1614' } }}", "cornerRadius": 14 }, "layout": { "maxWidth": "infinity", "padding": { "top": 6, "bottom": 6 } } }, "children": [ { "id": "recipes_ingredient_row_body", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 10, "bottom": 10, "leading": 12, "trailing": 12 } } }, "children": [ { "id": "recipes_ingredient_check_icon", "type": "image", "context": { "_source": "{{ ${checkedIngredients} ~ @{item} ? 'sf://checkmark.circle.fill' : 'sf://circle' }}" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": "{{ ${checkedIngredients} ~ @{item} ? '#34C759' : 'secondary' }}" } } }, { "id": "recipes_ingredient_text", "type": "text", "context": { "_text": "@{item}" }, "style": { "layout": { "maxWidth": "infinity" }, "common": { "font": "body", "foreground": "{{ ${checkedIngredients} ~ @{item} ? { 'light': '#355845', 'dark': '#CFECD8' } : { 'light': '#231815', 'dark': '#FFF8F2' } }}" } } } ] } ], "events": { "onTap": [ { "state": { "id": "act_toggle_ingredient", "input": { "checkedIngredients": "{{ ${checkedIngredients} ~ @{item} ? ${checkedIngredients} - @{item} : ${checkedIngredients} + @{item} }}" } } } ] } } } ] }, { "id": "recipes_steps_section", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "#FCF8F2", "dark": "#241D1A" }, "cornerRadius": 20 } }, "children": [ { "id": "recipes_steps_header", "type": "label", "context": { "_title": "Instructions", "_image": "sf://list.number" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } }, { "id": "recipes_steps_dynamic", "type": "dynamic", "context": { "_data": "@{selectedRecipe.instructions}" }, "prototype": { "id": "recipes_step_row", "type": "hstack", "context": { "_spacing": 12, "_alignment": "top" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 6, "bottom": 6 } } }, "children": [ { "id": "recipes_step_badge", "type": "text", "context": { "_text": "{{ cast(@{index} + 1, 'str') }}" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#D98C5F", "#B85C38" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": "white", "cornerRadius": 14, "font": { "kind": "caption", "weight": "bold" } }, "text": { "multilineTextAlignment": "center" } } }, { "id": "recipes_step_text", "type": "text", "context": { "_text": "@{item}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 2 } }, "common": { "font": "body", "foreground": { "light": "#231815", "dark": "#FFF8F2" } } } } ] } } ] } ] } ] } } } ] } } } ], "events": { "onAppear": [ { "state": { "id": "act_initial_load", "input": { "isLoading": true, "error": "", "focused": "" }, "output": { "success": [ { "template": { "id": "act_initial_fetch", "input": "act_fetch_recipes" } } ] } } } ] } }