{ "id": "weather_informer_root", "type": "module", "version": "1.0", "context": { "title": "Weather Informer", "icon": "🌦️", "accentStart": "#4FACFE", "accentEnd": "#00C6FF", "cardLight": "#FFFFFF", "cardDark": "#162033", "bgTop": "#0B1220", "bgBottom": "#153b74" }, "state": { "query": "", "queryFocused": false, "cities": [], "selectedCity": {}, "forecast": {}, "loadingCities": false, "loadingForecast": false, "error": "", "showEmptyHint": false }, "dependencies": [ { "repository": { "remote": { "id": "repo_geo", "config": { "endPoint": "https://geocoding-api.open-meteo.com/v1/search" } } } }, { "repository": { "remote": { "id": "repo_weather", "config": { "endPoint": "https://api.open-meteo.com/v1/forecast" } } } } ], "children": [ { "id": "weather_screen", "type": "scroll", "style": { "scroll": { "dismissesKeyboard": "interactively" }, "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "weather_root_stack", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 20, "bottom": 28, "leading": 18, "trailing": 18 }, "maxWidth": "infinity" } }, "children": [ { "id": "hero_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "common": { "background": { "gradient": { "linear": { "colors": [ "@{bgTop}", "@{bgBottom}" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "cornerRadius": 24, "glass": "regular" }, "layout": { "padding": 18, "maxWidth": "infinity" }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 14, "y": 6, "outer": true } }, "children": [ { "id": "hero_top_row", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "children": [ { "id": "hero_icon_wrap", "type": "zstack", "style": { "layout": { "width": 52, "height": 52 } }, "children": [ { "id": "hero_icon_bg", "type": "circle", "style": { "layout": { "width": 52, "height": 52 }, "shape": { "fill": { "color": { "color": "white", "opacity": 0.16 } } } } }, { "id": "hero_icon", "type": "image", "context": { "_source": "sf://cloud.sun.fill" }, "style": { "common": { "foreground": { "color": "white" } }, "layout": { "width": 26, "height": 26 } } } ] }, { "id": "hero_copy", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "children": [ { "id": "hero_heading", "type": "text", "context": { "_text": "Weekly forecast for any city" }, "style": { "common": { "font": { "kind": "headline" }, "foreground": { "color": "white" } } } }, { "id": "hero_subheading", "type": "text", "context": { "_text": "Search a city to see the next 7 days." }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.78 } } } } } ] } ] }, { "id": "search_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "common": { "background": { "color": { "color": "white", "opacity": 0.12 } }, "cornerRadius": 18, "glass": "clear" }, "layout": { "padding": 14, "maxWidth": "infinity" } }, "children": [ { "id": "search_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "search_icon", "type": "image", "context": { "_source": "sf://magnifyingglass" }, "style": { "common": { "foreground": { "color": { "color": "white", "opacity": 0.8 } } }, "layout": { "width": 18, "height": 18 } } }, { "id": "city_field", "type": "textfield", "context": { "_label": "City", "_text": "${query}", "_focused": "${queryFocused}", "_debounce": 0.3 }, "style": { "textField": { "standard": "plain", "submitLabel": "search", "autocapitalization": "words", "autocorrectionDisabled": true }, "common": { "foreground": { "color": "white" } }, "layout": { "maxWidth": "infinity" } }, "events": { "onSubmit": [ { "state": { "id": "dismiss_keyboard_submit", "input": { "queryFocused": false } } }, { "condition": { "id": "submit_has_query", "input": "{{ notEmpty(trim(${query})) }}", "output": { "success": [ { "state": { "id": "submit_start_search", "input": { "loadingCities": true, "loadingForecast": false, "error": "", "cities": [], "forecast": {}, "selectedCity": {}, "showEmptyHint": false } } }, { "repo": { "id": "submit_geo_lookup", "input": { "repositoryId": "repo_geo", "operation": "read", "params": { "body": { "name": "${query}", "count": 5, "language": "en", "format": "json" } } }, "output": { "success": [ { "state": { "id": "submit_geo_success", "input": { "cities": "@{submit_geo_lookup.results}", "loadingCities": false, "showEmptyHint": "{{ empty(@{submit_geo_lookup.results}) }}" } } } ], "failure": [ { "state": { "id": "submit_geo_failure", "input": { "error": "@{submit_geo_lookup.message}", "loadingCities": false, "showEmptyHint": false } } } ] } } } ], "failure": [ { "state": { "id": "submit_require_city", "input": { "error": "Enter a city name to search.", "cities": [], "forecast": {}, "selectedCity": {}, "showEmptyHint": false, "loadingCities": false, "loadingForecast": false } } } ] } } } ], "onChange": { "observed": "query", "actions": [ { "condition": { "id": "query_change_check", "input": "{{ count(trim(${query})) >= 2 }}", "output": { "success": [ { "state": { "id": "query_change_prepare", "input": { "loadingCities": true, "loadingForecast": false, "error": "", "cities": [], "forecast": {}, "selectedCity": {}, "showEmptyHint": false } } }, { "repo": { "id": "query_geo_lookup", "input": { "repositoryId": "repo_geo", "operation": "read", "params": { "body": { "name": "${query}", "count": 5, "language": "en", "format": "json" } } }, "output": { "success": [ { "state": { "id": "query_geo_success", "input": { "cities": "@{query_geo_lookup.results}", "loadingCities": false, "showEmptyHint": "{{ empty(@{query_geo_lookup.results}) }}" } } } ], "failure": [ { "state": { "id": "query_geo_failure", "input": { "error": "@{query_geo_lookup.message}", "loadingCities": false, "showEmptyHint": false } } } ] }, "debounce": 0.35 } } ], "failure": [ { "state": { "id": "query_reset_short", "input": { "cities": [], "forecast": {}, "selectedCity": {}, "error": "", "loadingCities": false, "loadingForecast": false, "showEmptyHint": false } } } ] } } } ] } } }, { "id": "clear_query_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${query}) }}", "_trueComponent": { "id": "clear_query_btn", "type": "button", "style": { "button": { "custom": { "layout": { "width": 36, "height": 36 }, "common": { "background": { "color": { "color": "white", "opacity": 0.14 } }, "cornerRadius": 18 } } } }, "children": [ { "id": "clear_query_icon", "type": "image", "context": { "_source": "sf://xmark.circle.fill" }, "style": { "common": { "foreground": { "color": { "color": "white", "opacity": 0.9 } } }, "layout": { "width": 18, "height": 18 } } } ], "events": { "onTap": [ { "state": { "id": "clear_query_action", "input": { "query": "", "queryFocused": false, "cities": [], "forecast": {}, "selectedCity": {}, "error": "", "loadingCities": false, "loadingForecast": false, "showEmptyHint": false } } } ] } } } } ] }, { "id": "search_hint", "type": "text", "context": { "_text": "{{ empty(${query}) ? 'Type at least 2 letters to search.' : (${loadingCities} ? 'Searching cities…' : 'Select a result below to load the 7-day forecast.') }}" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.72 } } } } } ] } ] }, { "id": "error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${error}) }}", "_trueComponent": { "id": "error_banner", "type": "label", "context": { "_title": "${error}", "_image": "sf://exclamationmark.triangle" }, "style": { "common": { "foreground": { "color": "red" }, "background": { "color": { "color": "red", "opacity": 0.1 } }, "cornerRadius": 16, "glass": "identity" }, "layout": { "padding": { "top": 12, "bottom": 12, "leading": 14, "trailing": 14 }, "maxWidth": "infinity" } } } } }, { "id": "empty_search_cond", "type": "conditional", "context": { "_condition": "{{ empty(${query}) && empty(${selectedCity}) && empty(${forecast}) && !${loadingCities} && !${loadingForecast} }}", "_trueComponent": { "id": "empty_search_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "common": { "background": { "material": "thin" }, "cornerRadius": 22, "glass": "regular" }, "layout": { "padding": 20, "maxWidth": "infinity" }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4, "outer": true } }, "children": [ { "id": "empty_search_icon", "type": "image", "context": { "_source": "sf://cloud.fill" }, "style": { "common": { "foreground": { "gradient": { "linear": { "colors": [ "@{accentStart}", "@{accentEnd}" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } }, "layout": { "width": 40, "height": 40 } } }, { "id": "empty_search_text", "type": "text", "context": { "_text": "Search for a city to see daily highs, lows, wind, and weather icons for the week ahead." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "multilineTextAlignment": "center" } } } ] } } }, { "id": "no_results_cond", "type": "conditional", "context": { "_condition": "${showEmptyHint}", "_trueComponent": { "id": "no_results_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "common": { "background": { "material": "thin" }, "cornerRadius": 20, "glass": "regular" }, "layout": { "padding": 18, "maxWidth": "infinity" } }, "children": [ { "id": "no_results_icon", "type": "image", "context": { "_source": "sf://magnifyingglass" }, "style": { "common": { "foreground": { "color": "secondary" } }, "layout": { "width": 24, "height": 24 } } }, { "id": "no_results_text", "type": "text", "context": { "_text": "No matching cities found. Try a broader search." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "multilineTextAlignment": "center" } } } ] } } }, { "id": "results_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${cities}) }}", "_trueComponent": { "id": "results_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "common": { "background": { "material": "thin" }, "cornerRadius": 22, "glass": "regular" }, "layout": { "padding": 16, "maxWidth": "infinity" }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 4, "outer": true } }, "children": [ { "id": "results_header", "type": "label", "context": { "_title": "Cities", "_image": "sf://location.fill" }, "style": { "common": { "font": "headline" } } }, { "id": "cities_list_stack", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "children": [ { "id": "cities_dynamic", "type": "dynamic", "context": { "_data": "${cities}" }, "prototype": { "id": "city_row_button", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 52 }, "common": { "background": { "color": { "color": "white", "opacity": 0.06 } }, "cornerRadius": 16 } } } }, "children": [ { "id": "city_row_content", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 12, "bottom": 12, "leading": 14, "trailing": 14 }, "maxWidth": "infinity" } }, "children": [ { "id": "city_row_icon", "type": "image", "context": { "_source": "sf://location.fill" }, "style": { "common": { "foreground": { "gradient": { "linear": { "colors": [ "@{accentStart}", "@{accentEnd}" ], "startPoint": "top", "endPoint": "bottom" } } } }, "layout": { "width": 20, "height": 20 } } }, { "id": "city_row_labels", "type": "vstack", "context": { "_spacing": 2, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "city_row_name", "type": "text", "context": { "_text": "@{item.name}" }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" } } } }, { "id": "city_row_subtitle", "type": "text", "context": { "_text": "{{ @{item.country} + (notEmpty(@{item.admin1}) ? ', ' + @{item.admin1} : '') }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "city_row_arrow", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "common": { "foreground": { "color": "secondary" } }, "layout": { "width": 12, "height": 12 } } } ] } ], "events": { "onTap": [ { "state": { "id": "dismiss_keyboard_pick_city", "input": { "queryFocused": false } } }, { "state": { "id": "set_selected_city", "input": { "selectedCity": "@{item}", "loadingForecast": true, "forecast": {}, "error": "" } } }, { "repo": { "id": "load_city_forecast", "input": { "repositoryId": "repo_weather", "operation": "read", "params": { "body": { "latitude": "@{item.latitude}", "longitude": "@{item.longitude}", "daily": "weather_code,temperature_2m_max,temperature_2m_min,wind_speed_10m_max", "timezone": "auto", "forecast_days": 7 } } }, "output": { "success": [ { "state": { "id": "set_forecast_success", "input": { "forecast": "@{load_city_forecast}", "loadingForecast": false, "cities": [] } } } ], "failure": [ { "state": { "id": "set_forecast_failure", "input": { "error": "@{load_city_forecast.message}", "loadingForecast": false } } } ] } } } ] } } } ] } ] } } }, { "id": "loading_forecast_cond", "type": "conditional", "context": { "_condition": "${loadingForecast}", "_trueComponent": { "id": "loading_forecast_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "common": { "background": { "material": "thin" }, "cornerRadius": 22, "glass": "regular" }, "layout": { "padding": 22, "maxWidth": "infinity" } }, "children": [ { "id": "loading_progress", "type": "progress" }, { "id": "loading_text", "type": "text", "context": { "_text": "Loading 7-day forecast…" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } } ] } } }, { "id": "forecast_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${forecast.daily.time}) && notEmpty(${selectedCity.name}) }}", "_trueComponent": { "id": "forecast_stack", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading" }, "children": [ { "id": "selected_city_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "common": { "background": { "gradient": { "linear": { "colors": [ "@{accentStart}", "@{accentEnd}" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "cornerRadius": 22, "glass": "clear" }, "layout": { "padding": 18, "maxWidth": "infinity" }, "shadow": { "color": { "color": "black", "opacity": 0.14 }, "radius": 12, "y": 4, "outer": true } }, "children": [ { "id": "selected_city_top", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "selected_city_icon", "type": "image", "context": { "_source": "sf://sun.max.fill" }, "style": { "common": { "foreground": { "color": "white" } }, "layout": { "width": 22, "height": 22 } } }, { "id": "selected_city_name", "type": "text", "context": { "_text": "{{ ${selectedCity.name} + ', ' + ${selectedCity.country} }}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "color": "white" } } } } ] }, { "id": "selected_city_sub", "type": "text", "context": { "_text": "7-day outlook" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.82 } } } } } ] }, { "id": "forecast_days_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "common": { "background": { "material": "thin" }, "cornerRadius": 22, "glass": "regular" }, "layout": { "padding": 16, "maxWidth": "infinity" }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 4, "outer": true } }, "children": [ { "id": "forecast_days_header", "type": "label", "context": { "_title": "Weekly Forecast", "_image": "sf://calendar" }, "style": { "common": { "font": "headline" } } }, { "id": "forecast_days_dynamic", "type": "dynamic", "context": { "_data": "${forecast.daily.time}" }, "prototype": { "id": "forecast_day_row", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "children": [ { "id": "forecast_day_inner", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 8, "bottom": 8 }, "maxWidth": "infinity" } }, "children": [ { "id": "forecast_day_name", "type": "text", "context": { "_text": "{{ cast(@{item}, 'date') }}", "_format": { "date": { "style": "custom", "pattern": "EEE" } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" } }, "layout": { "width": 42 } } }, { "id": "forecast_day_icon", "type": "image", "context": { "_source": "{{ ${forecast.daily.weather_code[@{index}]} < 2 ? 'sf://sun.max.fill' : (${forecast.daily.weather_code[@{index}]} < 4 ? 'sf://cloud.sun.fill' : (${forecast.daily.weather_code[@{index}]} < 50 ? 'sf://cloud.fill' : (${forecast.daily.weather_code[@{index}]} < 70 ? 'sf://cloud.fill' : (${forecast.daily.weather_code[@{index}]} < 80 ? 'sf://cloud.fill' : 'sf://cloud.rain.fill')))) }}" }, "style": { "common": { "foreground": { "gradient": { "linear": { "colors": [ "#FFD166", "#6EC6FF" ], "startPoint": "top", "endPoint": "bottom" } } } }, "layout": { "width": 22, "height": 22 } } }, { "id": "forecast_day_desc", "type": "text", "context": { "_text": "{{ ${forecast.daily.weather_code[@{index}]} < 2 ? 'Sunny' : (${forecast.daily.weather_code[@{index}]} < 4 ? 'Partly cloudy' : (${forecast.daily.weather_code[@{index}]} < 50 ? 'Cloudy' : (${forecast.daily.weather_code[@{index}]} < 70 ? 'Rain' : (${forecast.daily.weather_code[@{index}]} < 80 ? 'Snow' : 'Showers')))) }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "forecast_day_temp", "type": "text", "context": { "_text": "{{ cast(${forecast.daily.temperature_2m_max[@{index}]}, 'int') + '° / ' + cast(${forecast.daily.temperature_2m_min[@{index}]}, 'int') + '°' }}" }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" } } } } ] }, { "id": "forecast_day_meta", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "forecast_wind_icon", "type": "image", "context": { "_source": "sf://wind" }, "style": { "common": { "foreground": { "color": "secondary" } }, "layout": { "width": 16, "height": 16 } } }, { "id": "forecast_wind_text", "type": "text", "context": { "_text": "{{ cast(${forecast.daily.wind_speed_10m_max[@{index}]}, 'int') + ' km/h max wind' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "forecast_divider_cond", "type": "conditional", "context": { "_condition": "{{ @{index} < count(${forecast.daily.time}) - 1 }}", "_trueComponent": { "id": "forecast_divider", "type": "divider" } } } ] } } ] } ] } } } ] } ] } ] }