{ "id": "mod_kitchen_converter", "type": "module", "version": "1.1", "context": { "title": "Kitchen Converter", "icon": "🥄", "layout": "phone" }, "children": [ { "id": "kitchen_tabs", "type": "tab", "style": { "tab": { "selectedTint": "#A7F3D0", "unselectedTint": "#94A3B8", "barBackground": "#0F172A" } }, "children": [ { "id": "tab_volume", "type": "module", "context": { "_tabTitle": "Volume", "_tabImage": "sf://drop.fill" }, "state": { "inputText": "250", "inputValue": 250, "fromUnit": "ml", "toUnit": "cup", "focused": "" }, "children": [ { "id": "vol_root_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#07111F", "#0B1F2E", "#12364A" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "vol_stack", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "baseMl": "{{ switch(${fromUnit} == 'ml', ${inputValue}, ${fromUnit} == 'L', ${inputValue} * 1000, ${fromUnit} == 'tsp', ${inputValue} * 4.92892, ${fromUnit} == 'tbsp', ${inputValue} * 14.7868, ${fromUnit} == 'cup', ${inputValue} * 236.588, ${fromUnit} == 'fl oz', ${inputValue} * 29.5735, ${fromUnit} == 'pt', ${inputValue} * 473.176, ${inputValue}) }}", "resultValue": "{{ switch(${toUnit} == 'ml', @{baseMl}, ${toUnit} == 'L', @{baseMl} / 1000, ${toUnit} == 'tsp', @{baseMl} / 4.92892, ${toUnit} == 'tbsp', @{baseMl} / 14.7868, ${toUnit} == 'cup', @{baseMl} / 236.588, ${toUnit} == 'fl oz', @{baseMl} / 29.5735, ${toUnit} == 'pt', @{baseMl} / 473.176, @{baseMl}) }}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "vol_hero_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0EA5A4", "#14B8A6", "#2DD4BF" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 16, "y": 8 } }, "children": [ { "id": "vol_hero_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "vol_hero_icon", "type": "image", "context": { "_source": "sf://drop.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": { "color": "white" } } } }, { "id": "vol_hero_label", "type": "text", "context": { "_text": "Fast volume conversions" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } } ] }, { "id": "vol_hero_hint", "type": "text", "context": { "_text": "Perfect for cups, spoons, liters, and milliliters while you cook." }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "vol_input_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "vol_amount_label", "type": "label", "context": { "_title": "Amount", "_image": "sf://number" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "vol_input_field", "type": "textfield", "context": { "_label": "Enter amount", "_text": "${inputText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "onSurface" }, "background": { "light": "#FFFFFF", "dark": "#1E293B" }, "cornerRadius": 12 } }, "events": { "onChange": { "observed": "inputText", "actions": [ { "state": { "id": "vol_parse_input", "input": { "inputValue": "{{ cast(${inputText}, 'double') ?? 0 }}" } } } ] } } }, { "id": "vol_input_hint", "type": "text", "context": { "_text": "Use decimal values like 0.5, 1.25, or 250." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "vol_unit_card", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "vol_from_picker", "type": "picker", "context": { "_label": "From", "_selection": "${fromUnit}", "_options": [ "ml", "L", "tsp", "tbsp", "cup", "fl oz", "pt" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } }, { "id": "vol_swap_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "vol_swap_line_left", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } }, { "id": "vol_swap_button", "type": "button", "style": { "button": { "custom": { "layout": { "width": 52, "height": 52 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#14B8A6", "#0EA5A4" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 26 } } }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 8, "y": 4 } }, "children": [ { "id": "vol_swap_icon", "type": "image", "context": { "_source": "sf://arrow.up.arrow.down" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "state": { "id": "vol_swap_units", "input": { "fromUnit": "${toUnit}", "toUnit": "${fromUnit}", "focused": "" } } } ] } }, { "id": "vol_swap_line_right", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } } ] }, { "id": "vol_to_picker", "type": "picker", "context": { "_label": "To", "_selection": "${toUnit}", "_options": [ "ml", "L", "tsp", "tbsp", "cup", "fl oz", "pt" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } } ] }, { "id": "vol_result_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#164E63", "#0F766E" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 14, "y": 8 }, "animation": { "kind": "spring", "value": "${inputValue}", "duration": 0.35, "bounce": 0.32 } }, "children": [ { "id": "vol_result_top", "type": "label", "context": { "_title": "Converted amount", "_image": "sf://sparkles" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "vol_result_value_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "bottom" }, "children": [ { "id": "vol_result_number", "type": "text", "context": { "_text": "@{resultValue}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "vol_result_unit", "type": "text", "context": { "_text": "${toUnit}" }, "style": { "common": { "font": "title3", "foreground": { "color": { "color": "white", "opacity": 0.85 } } } } } ] }, { "id": "vol_result_sub", "type": "text", "context": { "_text": "{{ ${inputText} + ' ' + ${fromUnit} + ' = ' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.8 } } } } } ] }, { "id": "vol_reference_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "thin" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": "regular" } }, "children": [ { "id": "vol_reference_head", "type": "label", "context": { "_title": "Quick kitchen guide", "_image": "sf://book.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "vol_reference_line_1", "type": "text", "context": { "_text": "1 cup = 236.59 ml" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "vol_reference_line_2", "type": "text", "context": { "_text": "1 tbsp = 14.79 ml" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "vol_reference_line_3", "type": "text", "context": { "_text": "1 tsp = 4.93 ml" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } } ] } ] } ] } ] }, { "id": "tab_weight", "type": "module", "context": { "_tabTitle": "Weight", "_tabImage": "sf://scalemass.fill" }, "state": { "inputText": "500", "inputValue": 500, "fromUnit": "g", "toUnit": "oz", "focused": "" }, "children": [ { "id": "wt_root_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#140B18", "#24152E", "#3B1F4F" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "wt_stack", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "baseGrams": "{{ switch(${fromUnit} == 'g', ${inputValue}, ${fromUnit} == 'kg', ${inputValue} * 1000, ${fromUnit} == 'oz', ${inputValue} * 28.3495, ${fromUnit} == 'lb', ${inputValue} * 453.592, ${inputValue}) }}", "resultValue": "{{ switch(${toUnit} == 'g', @{baseGrams}, ${toUnit} == 'kg', @{baseGrams} / 1000, ${toUnit} == 'oz', @{baseGrams} / 28.3495, ${toUnit} == 'lb', @{baseGrams} / 453.592, @{baseGrams}) }}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "wt_hero_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#A855F7", "#8B5CF6", "#6366F1" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 16, "y": 8 } }, "children": [ { "id": "wt_hero_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "wt_hero_icon", "type": "image", "context": { "_source": "sf://scalemass.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": { "color": "white" } } } }, { "id": "wt_hero_label", "type": "text", "context": { "_text": "Convert baking weights" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } } ] }, { "id": "wt_hero_hint", "type": "text", "context": { "_text": "Switch quickly between grams, kilograms, ounces, and pounds." }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } } } } ] }, { "id": "wt_input_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "wt_amount_label", "type": "label", "context": { "_title": "Amount", "_image": "sf://scalemass" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "wt_input_field", "type": "textfield", "context": { "_label": "Enter amount", "_text": "${inputText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "onSurface" }, "background": { "light": "#FFFFFF", "dark": "#1E293B" }, "cornerRadius": 12 } }, "events": { "onChange": { "observed": "inputText", "actions": [ { "state": { "id": "wt_parse_input", "input": { "inputValue": "{{ cast(${inputText}, 'double') ?? 0 }}" } } } ] } } }, { "id": "wt_input_hint", "type": "text", "context": { "_text": "Great for flour, sugar, butter, and dough weights." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "wt_unit_card", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "wt_from_picker", "type": "picker", "context": { "_label": "From", "_selection": "${fromUnit}", "_options": [ "g", "kg", "oz", "lb" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } }, { "id": "wt_swap_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "wt_swap_line_left", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } }, { "id": "wt_swap_button", "type": "button", "style": { "button": { "custom": { "layout": { "width": 52, "height": 52 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#8B5CF6", "#6366F1" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 26 } } }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 8, "y": 4 } }, "children": [ { "id": "wt_swap_icon", "type": "image", "context": { "_source": "sf://arrow.up.arrow.down" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "state": { "id": "wt_swap_units", "input": { "fromUnit": "${toUnit}", "toUnit": "${fromUnit}", "focused": "" } } } ] } }, { "id": "wt_swap_line_right", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } } ] }, { "id": "wt_to_picker", "type": "picker", "context": { "_label": "To", "_selection": "${toUnit}", "_options": [ "g", "kg", "oz", "lb" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } } ] }, { "id": "wt_result_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#3B0764", "#4338CA" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 14, "y": 8 }, "animation": { "kind": "spring", "value": "${inputValue}", "duration": 0.35, "bounce": 0.32 } }, "children": [ { "id": "wt_result_top", "type": "label", "context": { "_title": "Converted weight", "_image": "sf://sparkles" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "wt_result_value_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "bottom" }, "children": [ { "id": "wt_result_number", "type": "text", "context": { "_text": "@{resultValue}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "wt_result_unit", "type": "text", "context": { "_text": "${toUnit}" }, "style": { "common": { "font": "title3", "foreground": { "color": { "color": "white", "opacity": 0.85 } } } } } ] }, { "id": "wt_result_sub", "type": "text", "context": { "_text": "{{ ${inputText} + ' ' + ${fromUnit} + ' = ' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.8 } } } } } ] }, { "id": "wt_reference_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "thin" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": "regular" } }, "children": [ { "id": "wt_reference_head", "type": "label", "context": { "_title": "Quick baking guide", "_image": "sf://fork.knife" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "wt_reference_line_1", "type": "text", "context": { "_text": "1 oz = 28.35 g" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "wt_reference_line_2", "type": "text", "context": { "_text": "1 lb = 453.59 g" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "wt_reference_line_3", "type": "text", "context": { "_text": "1 kg = 2.20 lb" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } } ] } ] } ] } ] }, { "id": "tab_temp", "type": "module", "context": { "_tabTitle": "Temp", "_tabImage": "sf://thermometer.medium" }, "state": { "inputText": "180", "inputValue": 180, "fromUnit": "°C", "toUnit": "°F", "focused": "" }, "children": [ { "id": "temp_root_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#1B1020", "#331826", "#4A1D1F" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "temp_stack", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "resultValue": "{{ switch(${fromUnit} == ${toUnit}, ${inputValue}, ${fromUnit} == '°C' && ${toUnit} == '°F', ${inputValue} * 9 / 5 + 32, ${fromUnit} == '°C' && ${toUnit} == 'K', ${inputValue} + 273.15, ${fromUnit} == '°F' && ${toUnit} == '°C', (${inputValue} - 32) * 5 / 9, ${fromUnit} == '°F' && ${toUnit} == 'K', (${inputValue} - 32) * 5 / 9 + 273.15, ${fromUnit} == 'K' && ${toUnit} == '°C', ${inputValue} - 273.15, ${fromUnit} == 'K' && ${toUnit} == '°F', (${inputValue} - 273.15) * 9 / 5 + 32, ${inputValue}) }}", "formulaText": "{{ switch(${fromUnit} == ${toUnit}, 'Same unit', ${fromUnit} == '°C' && ${toUnit} == '°F', '°F = °C × 9/5 + 32', ${fromUnit} == '°C' && ${toUnit} == 'K', 'K = °C + 273.15', ${fromUnit} == '°F' && ${toUnit} == '°C', '°C = (°F − 32) × 5/9', ${fromUnit} == '°F' && ${toUnit} == 'K', 'K = (°F − 32) × 5/9 + 273.15', ${fromUnit} == 'K' && ${toUnit} == '°C', '°C = K − 273.15', ${fromUnit} == 'K' && ${toUnit} == '°F', '°F = (K − 273.15) × 9/5 + 32', 'Same unit') }}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "temp_hero_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#FB7185", "#F97316", "#F59E0B" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 16, "y": 8 } }, "children": [ { "id": "temp_hero_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "temp_hero_icon", "type": "image", "context": { "_source": "sf://thermometer.medium" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": { "color": "white" } } } }, { "id": "temp_hero_label", "type": "text", "context": { "_text": "Oven and candy temps" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } } ] }, { "id": "temp_hero_hint", "type": "text", "context": { "_text": "Switch between Celsius, Fahrenheit, and Kelvin in one tap." }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } } } } ] }, { "id": "temp_input_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "temp_amount_label", "type": "label", "context": { "_title": "Temperature", "_image": "sf://flame.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "temp_input_field", "type": "textfield", "context": { "_label": "Enter temperature", "_text": "${inputText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "onSurface" }, "background": { "light": "#FFFFFF", "dark": "#1E293B" }, "cornerRadius": 12 } }, "events": { "onChange": { "observed": "inputText", "actions": [ { "state": { "id": "temp_parse_input", "input": { "inputValue": "{{ cast(${inputText}, 'double') ?? 0 }}" } } } ] } } }, { "id": "temp_input_hint", "type": "text", "context": { "_text": "Helpful for ovens, syrups, frying, and chocolate work." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "temp_unit_card", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "onSurface" }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "temp_from_picker", "type": "picker", "context": { "_label": "From", "_selection": "${fromUnit}", "_options": [ "°C", "°F", "K" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } }, { "id": "temp_swap_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "temp_swap_line_left", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } }, { "id": "temp_swap_button", "type": "button", "style": { "button": { "custom": { "layout": { "width": 52, "height": 52 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#F97316", "#FB7185" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 26 } } }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 8, "y": 4 } }, "children": [ { "id": "temp_swap_icon", "type": "image", "context": { "_source": "sf://arrow.up.arrow.down" }, "style": { "layout": { "width": 20, "height": 20 }, "common": { "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "state": { "id": "temp_swap_units", "input": { "fromUnit": "${toUnit}", "toUnit": "${fromUnit}", "focused": "" } } } ] } }, { "id": "temp_swap_line_right", "type": "capsule", "style": { "layout": { "height": 2, "maxWidth": "infinity" }, "shape": { "fill": { "color": { "light": "#D1D5DB", "dark": "#334155" } } } } } ] }, { "id": "temp_to_picker", "type": "picker", "context": { "_label": "To", "_selection": "${toUnit}", "_options": [ "°C", "°F", "K" ] }, "style": { "picker": "menu", "common": { "foreground": { "color": "onSurface" } } } } ] }, { "id": "temp_result_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#7C2D12", "#BE123C" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 14, "y": 8 }, "animation": { "kind": "spring", "value": "${inputValue}", "duration": 0.35, "bounce": 0.32 } }, "children": [ { "id": "temp_result_top", "type": "label", "context": { "_title": "Converted temperature", "_image": "sf://sparkles" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "temp_result_value_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "bottom" }, "children": [ { "id": "temp_result_number", "type": "text", "context": { "_text": "@{resultValue}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "temp_result_unit", "type": "text", "context": { "_text": "${toUnit}" }, "style": { "common": { "font": "title3", "foreground": { "color": { "color": "white", "opacity": 0.85 } } } } } ] }, { "id": "temp_formula_text", "type": "text", "context": { "_text": "@{formulaText}" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.82 } } } } } ] }, { "id": "temp_reference_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "thin" }, "foreground": { "color": "onSurface" }, "cornerRadius": 20, "glass": "regular" } }, "children": [ { "id": "temp_reference_head", "type": "label", "context": { "_title": "Common cooking temps", "_image": "sf://flame.circle.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurface" } } } }, { "id": "temp_reference_line_1", "type": "text", "context": { "_text": "160°C = 320°F" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "temp_reference_line_2", "type": "text", "context": { "_text": "180°C = 356°F" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } }, { "id": "temp_reference_line_3", "type": "text", "context": { "_text": "200°C = 392°F" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurface" } } } } ] } ] } ] } ] } ] } ] }