{ "id": "water_tracker_root", "type": "module", "version": "1.0", "context": { "_title": "Water", "icon": "💧", "layout": "phone", "iconColor": "blue" }, "state": { "intake": 0, "goal": "2000", "entries": [], "customRaw": 0.5, "showResetAlert": false }, "dependencies": [ { "repository": { "local": { "id": "wt_local", "config": {} } } }, { "action": { "repo": { "id": "wt_persist_day", "input": { "repositoryId": "wt_local", "operation": "create", "params": { "collection": "water", "documentId": "{{ 'day' + cast(#{today}, 'str') }}", "body": { "intake": "${intake}", "entries": "${entries}" }, "rewrite": true } } } } }, { "action": { "repo": { "id": "wt_persist_settings", "input": { "repositoryId": "wt_local", "operation": "create", "params": { "collection": "water", "documentId": "settings", "body": { "goal": "${goal}" }, "rewrite": true } } } } } ], "children": [ { "id": "wt_nav", "type": "navigation", "context": { "navigationTitle": "Water" }, "children": [ { "id": "wt_scroll", "type": "scroll", "style": { "navigation": { "navigationTitle": "Water", "navigationBarTitleDisplayMode": "large" } }, "children": [ { "id": "wt_main", "type": "vstack", "context": { "_spacing": 24, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 12, "bottom": 32, "leading": 20, "trailing": 20 } } }, "children": [ { "id": "wt_ring", "type": "zstack", "context": { "_alignment": "center" }, "children": [ { "id": "wt_ring_track", "type": "circle", "style": { "layout": { "width": 220, "height": 220 }, "shape": { "stroke": { "content": { "color": { "color": "#0505d5", "opacity": 0.15 } }, "style": { "lineWidth": 18 } } } } }, { "id": "wt_ring_fill", "type": "circle", "style": { "layout": { "width": 220, "height": 220 }, "shape": { "trim": { "from": 0, "to": "{{ min([${intake} / cast(${goal}, 'double'), 1.0]) }}" }, "rotation": { "angle": -90, "anchor": "center" }, "stroke": { "content": { "color": "blue" }, "style": { "lineWidth": 18 } } }, "animation": { "kind": "easeInOut", "value": "${intake}", "duration": 0.5 } } }, { "id": "wt_ring_center", "type": "vstack", "context": { "_spacing": 4, "_alignment": "center" }, "children": [ { "id": "wt_intake_text", "type": "text", "context": { "_text": "{{ ${intake} + ' ml' }}" }, "style": { "common": { "font": "largeTitle", "foreground": { "color": "primary" } }, "text": { "bold": true } } }, { "id": "wt_goal_text", "type": "text", "context": { "_text": "{{ 'of ' + ${goal} + ' ml' }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } }, { "id": "wt_pct_text", "type": "text", "context": { "_text": "{{ cast(min([${intake} / cast(${goal}, 'double'), 1.0]) * 100, 'int') + '%' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "blue" } } } } ] } ] }, { "id": "wt_goal_reached", "type": "conditional", "context": { "_condition": "{{ ${intake} >= cast(${goal}, 'int') }}", "_trueComponent": { "id": "wt_goal_reached_text", "type": "text", "context": { "_text": "Daily goal reached 🎉" }, "style": { "common": { "font": "headline", "foreground": { "color": "green" } } } } } }, { "id": "wt_quick_row", "type": "hstack", "context": { "_spacing": 12 }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "wt_add_150", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 12 } }, "common": { "background": { "color": "blue", "opacity": 0.12 }, "cornerRadius": 14 } } } }, "children": [ { "id": "wt_add_150_stack", "type": "vstack", "context": { "_spacing": 4, "_alignment": "center" }, "children": [ { "id": "wt_add_150_icon", "type": "image", "context": { "_source": "sf://cup.and.saucer.fill" }, "style": { "layout": { "height": 22 }, "common": { "foreground": { "color": "blue" } } } }, { "id": "wt_add_150_label", "type": "text", "context": { "_text": "+150 ml" }, "style": { "common": { "font": "caption", "foreground": { "color": "blue" } } } } ] } ], "events": { "onTap": [ { "state": { "id": "wt_add_150_state", "input": { "intake": "{{ ${intake} + 150 }}", "entries": "{{ [{'amount': 150, 'at': #{now}}] + ${entries} }}" }, "output": { "success": [ { "template": { "id": "wt_add_150_persist", "input": "wt_persist_day" } } ] } } } ] } }, { "id": "wt_add_250", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 12 } }, "common": { "background": { "color": "blue", "opacity": 0.12 }, "cornerRadius": 14 } } } }, "children": [ { "id": "wt_add_250_stack", "type": "vstack", "context": { "_spacing": 4, "_alignment": "center" }, "children": [ { "id": "wt_add_250_icon", "type": "image", "context": { "_source": "sf://mug.fill" }, "style": { "layout": { "height": 22 }, "common": { "foreground": { "color": "blue" } } } }, { "id": "wt_add_250_label", "type": "text", "context": { "_text": "+250 ml" }, "style": { "common": { "font": "caption", "foreground": { "color": "blue" } } } } ] } ], "events": { "onTap": [ { "state": { "id": "wt_add_250_state", "input": { "intake": "{{ ${intake} + 250 }}", "entries": "{{ [{'amount': 250, 'at': #{now}}] + ${entries} }}" }, "output": { "success": [ { "template": { "id": "wt_add_250_persist", "input": "wt_persist_day" } } ] } } } ] } }, { "id": "wt_add_500", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 12 } }, "common": { "background": { "color": "blue", "opacity": 0.12 }, "cornerRadius": 14 } } } }, "children": [ { "id": "wt_add_500_stack", "type": "vstack", "context": { "_spacing": 4, "_alignment": "center" }, "children": [ { "id": "wt_add_500_icon", "type": "image", "context": { "_source": "sf://waterbottle.fill" }, "style": { "layout": { "height": 22 }, "common": { "foreground": { "color": "blue" } } } }, { "id": "wt_add_500_label", "type": "text", "context": { "_text": "+500 ml" }, "style": { "common": { "font": "caption", "foreground": { "color": "blue" } } } } ] } ], "events": { "onTap": [ { "state": { "id": "wt_add_500_state", "input": { "intake": "{{ ${intake} + 500 }}", "entries": "{{ [{'amount': 500, 'at': #{now}}] + ${entries} }}" }, "output": { "success": [ { "template": { "id": "wt_add_500_persist", "input": "wt_persist_day" } } ] } } } ] } } ] }, { "id": "wt_custom_section", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "light": "#F2F2F7", "dark": "#1C1C1E" }, "cornerRadius": 16 } }, "children": [ { "id": "wt_custom_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "wt_custom_header", "type": "text", "context": { "_text": "Custom amount" }, "style": { "common": { "font": "headline" } } }, { "id": "wt_custom_spacer", "type": "spacer" }, { "id": "wt_custom_value", "type": "text", "context": { "_text": "{{ cast(${customRaw} * 450 + 50, 'int') + ' ml' }}" }, "style": { "common": { "font": { "kind": "callout", "weight": "semibold" }, "foreground": { "color": "blue" } } } } ] }, { "id": "wt_custom_slider", "type": "slider", "context": { "_value": "${customRaw}" } }, { "id": "wt_add_custom", "type": "button", "context": { "_label": "Add custom amount" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 12 } }, "common": { "background": { "color": "blue" }, "foreground": { "color": "white" }, "cornerRadius": 14 } } } }, "events": { "onTap": [ { "state": { "id": "wt_add_custom_state", "input": { "intake": "{{ ${intake} + cast(${customRaw} * 450 + 50, 'int') }}", "entries": "{{ [{'amount': cast(${customRaw} * 450 + 50, 'int'), 'at': #{now}}] + ${entries} }}" }, "output": { "success": [ { "template": { "id": "wt_add_custom_persist", "input": "wt_persist_day" } } ] } } } ] } } ] }, { "id": "wt_goal_section", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "light": "#F2F2F7", "dark": "#1C1C1E" }, "cornerRadius": 16 } }, "children": [ { "id": "wt_goal_header", "type": "text", "context": { "_text": "Daily goal (ml)" }, "style": { "common": { "font": "headline" } } }, { "id": "wt_goal_picker", "type": "picker", "context": { "_label": "Daily goal", "_selection": "${goal}", "_options": [ "1500", "2000", "2500", "3000" ] }, "style": { "picker": "segmented" }, "events": { "onChange": { "observed": "goal", "actions": [ { "template": { "id": "wt_goal_persist_tpl", "input": "wt_persist_settings" } } ] } } } ] }, { "id": "wt_history_section", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "light": "#F2F2F7", "dark": "#1C1C1E" }, "cornerRadius": 16 } }, "children": [ { "id": "wt_history_header_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "wt_history_header", "type": "text", "context": { "_text": "Today's log" }, "style": { "common": { "font": "headline" } } }, { "id": "wt_history_spacer", "type": "spacer" }, { "id": "wt_reset_btn", "type": "button", "context": { "_label": "Reset" }, "style": { "common": { "tint": "red" }, "modal": { "alert": { "title": "Reset today?", "message": "This clears today's intake and log.", "isPresented": "${showResetAlert}", "actions": [ { "id": "wt_reset_confirm", "type": "button", "context": { "_label": "Reset" }, "events": { "onTap": [ { "state": { "id": "wt_reset_confirm_state", "input": { "intake": 0, "entries": [], "showResetAlert": false }, "output": { "success": [ { "template": { "id": "wt_reset_persist", "input": "wt_persist_day" } } ] } } } ] } }, { "id": "wt_reset_cancel", "type": "button", "context": { "_label": "Cancel" } } ] } } }, "events": { "onTap": [ { "state": { "id": "wt_reset_ask", "input": { "showResetAlert": true } } } ] } } ] }, { "id": "wt_history_switch", "type": "conditional", "context": { "_condition": "{{ empty(${entries}) }}", "_trueComponent": { "id": "wt_history_empty_text", "type": "text", "context": { "_text": "Nothing logged yet — add your first glass above." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } }, "_falseComponent": { "id": "wt_history_dynamic", "type": "dynamic", "context": { "_data": "${entries}" }, "prototype": { "id": "wt_entry_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "padding": { "vertical": 6 } } }, "children": [ { "id": "wt_entry_icon", "type": "image", "context": { "_source": "sf://drop.fill" }, "style": { "layout": { "width": 14 }, "common": { "foreground": { "color": "blue" } } } }, { "id": "wt_entry_amount", "type": "text", "context": { "_text": "{{ @{item.amount} + ' ml' }}" }, "style": { "common": { "font": "body" } } }, { "id": "wt_entry_spacer", "type": "spacer" }, { "id": "wt_entry_time", "type": "text", "context": { "_text": "@{item.at}", "format": { "date": "time" } }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] } } } } ] } ] } ] } ] } ], "events": { "onAppear": [ { "repo": { "id": "wt_load_settings", "input": { "repositoryId": "wt_local", "operation": "read", "params": { "collection": "water", "documentId": "settings" } }, "output": { "success": [ { "state": { "id": "wt_apply_settings", "input": { "goal": "{{ @{wt_load_settings.goal} ?? '2000' }}" } } } ] } } }, { "repo": { "id": "wt_load_day", "input": { "repositoryId": "wt_local", "operation": "read", "params": { "collection": "water", "documentId": "{{ 'day' + cast(#{today}, 'str') }}" } }, "output": { "success": [ { "state": { "id": "wt_apply_day", "input": { "intake": "{{ @{wt_load_day.intake} ?? 0 }}", "entries": "{{ @{wt_load_day.entries} ?? [] }}" } } } ], "failure": [ { "state": { "id": "wt_day_rollover", "input": { "intake": 0, "entries": [] } } } ] } } } ] } }