{ "id": "welcome_tour_module", "type": "module", "version": "1.1", "context": { "layout": "phone", "title": "Welcome Tour", "icon": "✨" }, "dependencies": [ { "repository": { "local": { "id": "onboarding_store", "config": {} } } }, { "service": { "audio": { "id": "audio" } } }, { "action": { "repo": { "id": "finish_tour_action", "input": { "repositoryId": "onboarding_store", "operation": "create", "params": { "collection": "preferences", "documentId": "welcome_tour", "rewrite": true, "body": { "completed": true } } }, "output": { "success": [ { "service": { "id": "finish_success_haptic_shared", "input": { "serviceId": "audio", "params": { "haptic": "success", "sound": "none" } } } }, { "state": { "id": "finish_tour_shared_state", "input": { "showTour": false, "tourComplete": true, "currentStep": 0, "finishError": "" } } } ], "failure": [ { "state": { "id": "finish_tour_save_failed", "input": { "finishError": "Welcome progress could not be saved. Check storage and try again.", "showTour": true, "tourComplete": false } } }, { "service": { "id": "finish_error_haptic", "input": { "serviceId": "audio", "params": { "haptic": "warning", "sound": "none" } } } } ] } } } } ], "state": { "isLoaded": false, "showTour": true, "currentStep": 0, "tourComplete": false, "finishError": "", "resetError": "" }, "events": { "onAppear": [ { "repo": { "id": "load_pref", "input": { "repositoryId": "onboarding_store", "operation": "read", "params": { "collection": "preferences", "documentId": "welcome_tour" } }, "output": { "success": [ { "state": { "id": "hydrate_pref", "input": { "isLoaded": true, "tourComplete": "{{ @{load_pref.completed} ? true : false }}", "showTour": "{{ @{load_pref.completed} ? false : true }}", "currentStep": 0 } } } ], "failure": [ { "state": { "id": "first_launch_pref", "input": { "isLoaded": true, "tourComplete": false, "showTour": true, "currentStep": 0 } } } ] } } } ] }, "children": [ { "id": "app_root", "type": "vstack", "context": { "_spacing": 0, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "loaded_gate", "type": "conditional", "context": { "_condition": "${isLoaded}", "_trueComponent": { "id": "main_gate", "type": "conditional", "context": { "_condition": "${showTour}", "_trueComponent": { "id": "tour_screen", "type": "scroll", "context": { "_spacing": 20, "_alignment": "center", "tourTitle": "{{ switch(${currentStep} == 0, 'Meet your new space', ${currentStep} == 1, 'Move at your pace', 'Ready when you are') }}", "tourBody": "{{ switch(${currentStep} == 0, 'A calm place to start, with the essentials right where you expect them.', ${currentStep} == 1, 'Use Next and Back to explore the tour without losing your place.', 'Finish once and this welcome tour stays out of the way.') }}", "tourIcon": "{{ switch(${currentStep} == 0, 'sf://sparkles', ${currentStep} == 1, 'sf://hand.tap.fill', 'sf://checkmark.seal.fill') }}" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 18, "bottom": 22, "leading": 20, "trailing": 20 } }, "common": { "background": { "color": "background" } }, "animation": { "kind": "spring", "value": "${currentStep}" } }, "children": [ { "id": "tour_topbar", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "tour_step_label", "type": "label", "context": { "_title": "{{ 'Step ' + cast(${currentStep} + 1, 'str') + ' of 3' }}", "_image": "sf://circle.grid.3x3.fill" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } }, { "id": "tour_top_spacer", "type": "spacer" }, { "id": "skip_btn", "type": "button", "context": { "_label": "Skip", "_image": "sf://forward.end.fill" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "layout": { "minHeight": 44 }, "common": { "tint": { "color": "#6E56CF" } } }, "events": { "onTap": [ { "template": { "id": "skip_finish_template", "input": "finish_tour_action" } } ] } } ] }, { "id": "tour_spacer_top", "type": "spacer" }, { "id": "hero_card", "type": "zstack", "style": { "layout": { "maxWidth": "infinity", "height": 300 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#1F1B4D", "#2C7DA0", "#76B39D" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 32 }, "shadow": { "color": { "color": "black", "opacity": 0.24 }, "radius": 24, "x": 0, "y": 14 } }, "children": [ { "id": "hero_soft_circle", "type": "image", "context": { "_source": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=880&h=880&fit=crop" }, "style": { "layout": { "width": 220, "height": 220 }, "common": { "cornerRadius": 24, "opacity": 1 } } }, { "id": "hero_icon", "type": "image", "context": { "_source": "@{tourIcon}" }, "style": { "layout": { "width": 148, "height": 148 }, "common": { "foreground": { "color": "white" }, "scale": "{{ ${currentStep} == 1 ? 1.06 : 1.0 }}" } } } ] }, { "id": "tour_copy_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 14, "x": 0, "y": 7 } }, "children": [ { "id": "tour_title", "type": "text", "context": { "_text": "@{tourTitle}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "onSurface" } }, "text": { "multilineTextAlignment": "center" } } }, { "id": "tour_body", "type": "text", "context": { "_text": "@{tourBody}" }, "style": { "common": { "font": "body", "foreground": { "color": "onSurfaceVariant" } }, "text": { "multilineTextAlignment": "center", "lineSpacing": 3 } } }, { "id": "prototype_notice", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 10, "bottom": 10, "leading": 12, "trailing": 12 }, "maxWidth": "infinity" }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 14 } }, "children": [ { "id": "prototype_notice_icon", "type": "image", "context": { "_source": "sf://wrench.and.screwdriver.fill" }, "style": { "layout": { "width": 16, "height": 16 }, "common": { "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "prototype_notice_text", "type": "text", "context": { "_text": "Demo prototype — adapt the content, images, and flow to your product’s needs." }, "style": { "common": { "font": "caption", "foreground": { "color": "onSurfaceVariant" } }, "text": { "multilineTextAlignment": "leading", "lineLimit": 3 } } } ] } ] }, { "id": "dots_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "dot_0", "type": "capsule", "style": { "layout": { "width": "{{ ${currentStep} == 0 ? 26 : 9 }}", "height": 9 }, "common": { "background": "{{ ${currentStep} == 0 ? { 'color': '#6E56CF' } : { 'color': 'surfaceVariant' } }}" }, "animation": { "kind": "spring", "value": "${currentStep}" } } }, { "id": "dot_1", "type": "capsule", "style": { "layout": { "width": "{{ ${currentStep} == 1 ? 26 : 9 }}", "height": 9 }, "common": { "background": "{{ ${currentStep} == 1 ? { 'color': '#6E56CF' } : { 'color': 'surfaceVariant' } }}" }, "animation": { "kind": "spring", "value": "${currentStep}" } } }, { "id": "dot_2", "type": "capsule", "style": { "layout": { "width": "{{ ${currentStep} == 2 ? 26 : 9 }}", "height": 9 }, "common": { "background": "{{ ${currentStep} == 2 ? { 'color': '#6E56CF' } : { 'color': 'surfaceVariant' } }}" }, "animation": { "kind": "spring", "value": "${currentStep}" } } } ] }, { "id": "tour_spacer_bottom", "type": "spacer" }, { "id": "tour_nav", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "tour_buttons", "type": "hstack", "context": { "_spacing": 12 }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "back_btn", "type": "button", "context": { "_label": "Back", "_image": "sf://chevron.left" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "layout": { "maxWidth": "infinity", "minHeight": 50 }, "common": { "disabled": "{{ ${currentStep} == 0 }}", "opacity": "{{ ${currentStep} == 0 ? 0.55 : 1.0 }}", "tint": { "color": "#6E56CF" } } }, "events": { "onTap": [ { "condition": { "id": "can_go_back", "input": "{{ ${currentStep} > 0 }}", "output": { "success": [ { "state": { "id": "go_back", "input": { "currentStep": "{{ ${currentStep} - 1 }}" }, "output": { "success": [ { "service": { "id": "back_haptic", "input": { "serviceId": "audio", "params": { "haptic": "light", "sound": "none" } } } } ] } } } ] } } } ] } }, { "id": "next_btn", "type": "button", "context": { "_label": "{{ ${currentStep} == 2 ? 'Get started' : 'Next' }}", "_image": "{{ ${currentStep} == 2 ? 'sf://checkmark.circle.fill' : 'sf://chevron.right' }}" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "maxWidth": "infinity", "minHeight": 50 }, "common": { "tint": { "color": "#6E56CF" } } }, "events": { "onTap": [ { "condition": { "id": "more_steps", "input": "{{ ${currentStep} < 2 }}", "output": { "success": [ { "state": { "id": "go_next", "input": { "currentStep": "{{ ${currentStep} + 1 }}", "finishError": "" }, "output": { "success": [ { "service": { "id": "next_haptic", "input": { "serviceId": "audio", "params": { "haptic": "light", "sound": "none" } } } } ] } } } ], "failure": [ { "template": { "id": "start_finish_template", "input": "finish_tour_action" } } ] } } } ] } } ] }, { "id": "back_helper", "type": "conditional", "context": { "_condition": "{{ ${currentStep} == 0 }}", "_trueComponent": { "id": "back_helper_text", "type": "text", "context": { "_text": "Back is available after you move forward." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } } }, { "id": "finish_error_msg", "type": "conditional", "context": { "_condition": "{{ notEmpty(${finishError}) }}", "_trueComponent": { "id": "finish_error_text", "type": "text", "context": { "_text": "${finishError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } }, "text": { "multilineTextAlignment": "center" } } } } } ] } ] }, "_falseComponent": { "id": "home_screen", "type": "vstack", "context": { "_spacing": 22, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 24, "bottom": 24, "leading": 20, "trailing": 20 } }, "common": { "background": { "color": "background" } }, "animation": { "kind": "spring", "value": "${showTour}" } }, "children": [ { "id": "home_sp_top", "type": "spacer" }, { "id": "home_card", "type": "vstack", "context": { "_spacing": 18, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 24 }, "common": { "background": { "color": "surface" }, "foreground": { "color": "onSurface" }, "cornerRadius": 28 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 22, "x": 0, "y": 12 } }, "children": [ { "id": "home_badge", "type": "zstack", "style": { "layout": { "width": 96, "height": 96 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#76B39D", "#6E56CF" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 28 } }, "children": [ { "id": "home_icon", "type": "image", "context": { "_source": "sf://house.fill" }, "style": { "layout": { "width": 46, "height": 46 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "home_headline", "type": "text", "context": { "_text": "You’re home" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "onSurface" } } } }, { "id": "home_sentence", "type": "text", "context": { "_text": "The welcome tour is marked complete, so future launches open here." }, "style": { "common": { "font": "body", "foreground": { "color": "onSurfaceVariant" } }, "text": { "multilineTextAlignment": "center", "lineSpacing": 3 } } }, { "id": "home_memory_chip", "type": "label", "context": { "_title": "Tour memory saved on this device", "_image": "sf://checkmark.shield.fill" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "home_reset_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": "surfaceVariant" }, "foreground": { "color": "onSurfaceVariant" }, "cornerRadius": 22 } }, "children": [ { "id": "reset_hint", "type": "text", "context": { "_text": "Trying the flow again?" }, "style": { "common": { "font": "headline", "foreground": { "color": "onSurfaceVariant" } } } }, { "id": "show_tour_btn", "type": "button", "context": { "_label": "Show the tour again", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "minHeight": 50, "maxWidth": "infinity" }, "common": { "tint": { "color": "#6E56CF" } } }, "events": { "onTap": [ { "repo": { "id": "reset_save_pref", "input": { "repositoryId": "onboarding_store", "operation": "create", "params": { "collection": "preferences", "documentId": "welcome_tour", "rewrite": true, "body": { "completed": false } } }, "output": { "success": [ { "service": { "id": "reset_haptic", "input": { "serviceId": "audio", "params": { "haptic": "light", "sound": "none" } } } }, { "state": { "id": "reset_tour_state", "input": { "showTour": true, "tourComplete": false, "currentStep": 0, "resetError": "" } } } ], "failure": [ { "state": { "id": "reset_failed", "input": { "resetError": "The tour memory could not be cleared. Try again." } } }, { "service": { "id": "reset_warning_haptic", "input": { "serviceId": "audio", "params": { "haptic": "warning", "sound": "none" } } } } ] } } } ] } }, { "id": "reset_error_msg", "type": "conditional", "context": { "_condition": "{{ notEmpty(${resetError}) }}", "_trueComponent": { "id": "reset_error_text", "type": "text", "context": { "_text": "${resetError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } }, "text": { "multilineTextAlignment": "center" } } } } } ] }, { "id": "home_sp_bottom", "type": "spacer" } ] } } }, "_falseComponent": { "id": "loading_screen", "type": "vstack", "context": { "_spacing": 18, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": 24 }, "common": { "background": { "color": "background" } } }, "children": [ { "id": "load_sp_top", "type": "spacer" }, { "id": "loading_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "padding": 24, "maxWidth": "infinity" }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 18, "x": 0, "y": 8 } }, "children": [ { "id": "loading_icon", "type": "image", "context": { "_source": "sf://sparkles" }, "style": { "layout": { "width": 54, "height": 54 }, "common": { "foreground": { "color": "#6E56CF" } } } }, { "id": "loading_progress", "type": "progress", "style": { "layout": { "width": 120 }, "common": { "tint": { "color": "#6E56CF" } } } }, { "id": "loading_text", "type": "text", "context": { "_text": "Preparing your welcome tour" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } } ] }, { "id": "load_sp_bottom", "type": "spacer" } ] } } } ] } ] }