@almadar/std 16.181.0 → 16.183.0

package/behaviors/registry/ui/game/atoms/std-tutorial-overlay.orb

@@ -0,0 +1,1060 @@
+{
+  "description": "Tutorial modal with media steps for game boards and learning shells: a paged overlay — title, an animated GIF/clip showing exactly how the mechanic is done, one line of body copy, a step counter, and Back / Next / Skip — composed entirely from registered render types (stack + text + image + button) into the overlay slot, so no new UI component is needed. autoShow opens it on INIT for first-time players; a board's help button re-opens it any time via SHOW (which rewinds to step one). DISMISS (or finishing the last step) marks the run done, clears the overlay, and emits TUTORIAL_DONE so the board can unpause or log. Steps are pure config — a board teaches a new mechanic by adding one { id, title, body, media } row.",
+  "ledger": {
+    "entries": {
+      "ent_01M0PEDYHYWBHKSA6ZVNM086R4": {
+        "bakedName": "TutorialState",
+        "curName": "TutorialState",
+        "id": "ent_01M0PEDYHYWBHKSA6ZVNM086R4",
+        "kind": "entity",
+        "owner": "workspace",
+        "renames": []
+      },
+      "evt_01M0PEDYHY99JGP0Q297BBCN02": {
+        "bakedName": "INIT",
+        "curName": "INIT",
+        "id": "evt_01M0PEDYHY99JGP0Q297BBCN02",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ12JJNHT06186T7N11": {
+        "bakedName": "TUTORIAL_DONE",
+        "curName": "TUTORIAL_DONE",
+        "id": "evt_01M0PEDYJ12JJNHT06186T7N11",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ1B3KT6WAQ36ESVPBC": {
+        "bakedName": "TUT_DISMISS",
+        "curName": "TUT_DISMISS",
+        "id": "evt_01M0PEDYJ1B3KT6WAQ36ESVPBC",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ1GA0KV2EHBHT5NGB8": {
+        "bakedName": "TUT_BACK",
+        "curName": "TUT_BACK",
+        "id": "evt_01M0PEDYJ1GA0KV2EHBHT5NGB8",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3": {
+        "bakedName": "TUT_NEXT",
+        "curName": "TUT_NEXT",
+        "id": "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ1PTYC6E8HS6C114XZ": {
+        "bakedName": "TUT_AUTO",
+        "curName": "TUT_AUTO",
+        "id": "evt_01M0PEDYJ1PTYC6E8HS6C114XZ",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "evt_01M0PEDYJ1ZSPPQSFWHNDRMQM7": {
+        "bakedName": "SHOW",
+        "curName": "SHOW",
+        "id": "evt_01M0PEDYJ1ZSPPQSFWHNDRMQM7",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "renames": []
+      },
+      "orb_01M0PEDYHYEZSSAA4NT93JBSNS": {
+        "bakedName": "TutorialOverlayOrbital",
+        "curName": "TutorialOverlayOrbital",
+        "id": "orb_01M0PEDYHYEZSSAA4NT93JBSNS",
+        "kind": "orbital",
+        "owner": "workspace",
+        "renames": []
+      },
+      "pag_01M0PEDYJ1ZDR53H1VD2HMY77M": {
+        "bakedName": "TutorialOverlayPage",
+        "curName": "TutorialOverlayPage",
+        "id": "pag_01M0PEDYJ1ZDR53H1VD2HMY77M",
+        "kind": "page",
+        "owner": "workspace",
+        "renames": []
+      },
+      "trt_01M0PEDYHY2HA8AFMMAD5883VT": {
+        "bakedName": "TutorialOverlay",
+        "curName": "TutorialOverlay",
+        "id": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+        "kind": "trait",
+        "owner": "workspace",
+        "renames": []
+      }
+    },
+    "schemaVersion": 1
+  },
+  "name": "std-tutorial-overlay",
+  "orbitals": [
+    {
+      "entity": {
+        "fields": [
+          {
+            "name": "id",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "default": 0.0,
+            "name": "step",
+            "type": "number"
+          },
+          {
+            "default": false,
+            "name": "done",
+            "type": "boolean"
+          }
+        ],
+        "id": "ent_01M0PEDYHYWBHKSA6ZVNM086R4",
+        "name": "TutorialState",
+        "persistence": "runtime",
+        "shared": true
+      },
+      "id": "orb_01M0PEDYHYEZSSAA4NT93JBSNS",
+      "name": "TutorialOverlayOrbital",
+      "pages": [
+        {
+          "id": "pag_01M0PEDYJ1ZDR53H1VD2HMY77M",
+          "name": "TutorialOverlayPage",
+          "path": "/tutorial-overlay",
+          "traits": [
+            {
+              "ref": "TutorialOverlay",
+              "refId": "trt_01M0PEDYHY2HA8AFMMAD5883VT"
+            }
+          ]
+        }
+      ],
+      "traits": [
+        {
+          "category": "interaction",
+          "config": {
+            "autoShow": {
+              "default": true,
+              "description": "When true the tutorial opens on INIT for this run; when false it stays hidden until SHOW.",
+              "label": "Auto Show",
+              "tier": "domain",
+              "type": "boolean"
+            },
+            "steps": {
+              "default": [],
+              "description": "One row per tutorial page: title, one line of body copy, and media — the URL of an animated GIF/clip showing exactly how the mechanic is performed (recorded from real gameplay).",
+              "items": {
+                "properties": {
+                  "body": {
+                    "name": "body",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "id": {
+                    "name": "id",
+                    "required": true,
+                    "type": "string"
+                  },
+                  "media": {
+                    "name": "media",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "mediaAlt": {
+                    "name": "mediaAlt",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "title": {
+                    "name": "title",
+                    "required": true,
+                    "type": "string"
+                  }
+                },
+                "type": "object"
+              },
+              "label": "Steps",
+              "tier": "presentation",
+              "type": "[TutorialStep]"
+            }
+          },
+          "emits": [
+            {
+              "description": "Self-emitted on INIT when autoShow is on — opens step one. (A config-valued INIT guard would be constant-folded at compose time and misfire; the self-event keeps the decision in an effect.)",
+              "event": "TUT_AUTO",
+              "eventId": "evt_01M0PEDYJ1PTYC6E8HS6C114XZ",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "essential"
+            },
+            {
+              "description": "Advance one step; on the last step it finishes the tutorial (marks done, clears the overlay, emits TUTORIAL_DONE).",
+              "event": "TUT_NEXT",
+              "eventId": "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "essential"
+            },
+            {
+              "description": "Return one step (inert on the first).",
+              "event": "TUT_BACK",
+              "eventId": "evt_01M0PEDYJ1GA0KV2EHBHT5NGB8",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "essential"
+            },
+            {
+              "description": "Skip/close the tutorial; marks done and clears the overlay.",
+              "event": "TUT_DISMISS",
+              "eventId": "evt_01M0PEDYJ1B3KT6WAQ36ESVPBC",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "essential"
+            },
+            {
+              "description": "Re-open the tutorial from step one — wire a board's help button here.",
+              "event": "SHOW",
+              "eventId": "evt_01M0PEDYJ1ZSPPQSFWHNDRMQM7",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "essential"
+            },
+            {
+              "description": "The tutorial was finished or skipped; boards unpause or log completion.",
+              "event": "TUTORIAL_DONE",
+              "eventId": "evt_01M0PEDYJ12JJNHT06186T7N11",
+              "payloadSchema": [
+                {
+                  "name": "id",
+                  "required": true,
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "domain"
+            }
+          ],
+          "entityContract": {
+            "provides": [
+              "done",
+              "step"
+            ],
+            "requires": []
+          },
+          "entityRebindable": true,
+          "entityRefIds": {
+            "TutorialState": "ent_01M0PEDYHYWBHKSA6ZVNM086R4"
+          },
+          "id": "trt_01M0PEDYHY2HA8AFMMAD5883VT",
+          "linkedEntity": "TutorialState",
+          "linkedEntityId": "ent_01M0PEDYHYWBHKSA6ZVNM086R4",
+          "name": "TutorialOverlay",
+          "scope": "instance",
+          "stateMachine": {
+            "events": [
+              {
+                "id": "evt_01M0PEDYHY99JGP0Q297BBCN02",
+                "key": "INIT",
+                "name": "Initialize"
+              },
+              {
+                "description": "Self-emitted on INIT when autoShow is on — opens step one. (A config-valued INIT guard would be constant-folded at compose time and misfire; the self-event keeps the decision in an effect.)",
+                "id": "evt_01M0PEDYJ1PTYC6E8HS6C114XZ",
+                "key": "TUT_AUTO",
+                "name": "Tut Auto",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "type": "string"
+                  }
+                ],
+                "tier": "essential"
+              },
+              {
+                "description": "Re-open the tutorial from step one — wire a board's help button here.",
+                "id": "evt_01M0PEDYJ1ZSPPQSFWHNDRMQM7",
+                "key": "SHOW",
+                "name": "Show",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "type": "string"
+                  }
+                ],
+                "tier": "essential"
+              },
+              {
+                "description": "Advance one step; on the last step it finishes the tutorial (marks done, clears the overlay, emits TUTORIAL_DONE).",
+                "id": "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3",
+                "key": "TUT_NEXT",
+                "name": "Tut Next",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "type": "string"
+                  }
+                ],
+                "tier": "essential"
+              },
+              {
+                "description": "Return one step (inert on the first).",
+                "id": "evt_01M0PEDYJ1GA0KV2EHBHT5NGB8",
+                "key": "TUT_BACK",
+                "name": "Tut Back",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "type": "string"
+                  }
+                ],
+                "tier": "essential"
+              },
+              {
+                "description": "Skip/close the tutorial; marks done and clears the overlay.",
+                "id": "evt_01M0PEDYJ1B3KT6WAQ36ESVPBC",
+                "key": "TUT_DISMISS",
+                "name": "Tut Dismiss",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "type": "string"
+                  }
+                ],
+                "tier": "essential"
+              },
+              {
+                "description": "The tutorial was finished or skipped; boards unpause or log completion.",
+                "id": "evt_01M0PEDYJ12JJNHT06186T7N11",
+                "key": "TUTORIAL_DONE",
+                "name": "Tutorial Done",
+                "payloadSchema": [
+                  {
+                    "name": "id",
+                    "required": true,
+                    "type": "string"
+                  }
+                ],
+                "tier": "domain"
+              }
+            ],
+            "states": [
+              {
+                "isInitial": true,
+                "name": "hidden"
+              },
+              {
+                "name": "showing"
+              }
+            ],
+            "transitions": [
+              {
+                "effects": [
+                  [
+                    "if",
+                    "@config.autoShow",
+                    [
+                      "emit",
+                      "TUT_AUTO",
+                      {
+                        "id": "auto"
+                      }
+                    ],
+                    [
+                      "render-ui",
+                      "overlay",
+                      null
+                    ]
+                  ]
+                ],
+                "event": "INIT",
+                "eventId": "evt_01M0PEDYHY99JGP0Q297BBCN02",
+                "from": "hidden",
+                "to": "hidden"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.step",
+                    0.0
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    {
+                      "children": [
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "title"
+                          ],
+                          "type": "typography",
+                          "variant": "h4",
+                          "weight": "bold"
+                        },
+                        {
+                          "alt": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "mediaAlt"
+                          ],
+                          "asset": {
+                            "category": "tutorial",
+                            "name": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                0.0
+                              ],
+                              "id"
+                            ],
+                            "url": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                0.0
+                              ],
+                              "media"
+                            ]
+                          },
+                          "className": "rounded-md",
+                          "fit": "contain",
+                          "type": "atlas-image"
+                        },
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "body"
+                          ],
+                          "type": "typography",
+                          "variant": "body"
+                        },
+                        {
+                          "align": "center",
+                          "content": [
+                            "str/concat",
+                            "1 / ",
+                            [
+                              "array/len",
+                              "@config.steps"
+                            ]
+                          ],
+                          "type": "typography",
+                          "variant": "caption"
+                        },
+                        {
+                          "children": [
+                            {
+                              "action": "TUT_NEXT",
+                              "label": [
+                                "if",
+                                [
+                                  ">",
+                                  [
+                                    "array/len",
+                                    "@config.steps"
+                                  ],
+                                  1.0
+                                ],
+                                "Next ▶",
+                                "Got it"
+                              ],
+                              "type": "button",
+                              "variant": "primary"
+                            },
+                            {
+                              "action": "TUT_DISMISS",
+                              "label": "Skip",
+                              "type": "button",
+                              "variant": "secondary"
+                            }
+                          ],
+                          "className": "pt-2",
+                          "direction": "horizontal",
+                          "justify": "center",
+                          "type": "stack"
+                        }
+                      ],
+                      "className": "bg-card text-card-foreground border border-border rounded-lg shadow-lg p-6 max-w-md mx-auto mt-16",
+                      "direction": "vertical",
+                      "type": "stack"
+                    }
+                  ]
+                ],
+                "event": "TUT_AUTO",
+                "eventId": "evt_01M0PEDYJ1PTYC6E8HS6C114XZ",
+                "from": "hidden",
+                "to": "showing"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.step",
+                    0.0
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    {
+                      "children": [
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "title"
+                          ],
+                          "type": "typography",
+                          "variant": "h4",
+                          "weight": "bold"
+                        },
+                        {
+                          "alt": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "mediaAlt"
+                          ],
+                          "asset": {
+                            "category": "tutorial",
+                            "name": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                0.0
+                              ],
+                              "id"
+                            ],
+                            "url": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                0.0
+                              ],
+                              "media"
+                            ]
+                          },
+                          "className": "rounded-md",
+                          "fit": "contain",
+                          "type": "atlas-image"
+                        },
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              0.0
+                            ],
+                            "body"
+                          ],
+                          "type": "typography",
+                          "variant": "body"
+                        },
+                        {
+                          "align": "center",
+                          "content": [
+                            "str/concat",
+                            "1 / ",
+                            [
+                              "array/len",
+                              "@config.steps"
+                            ]
+                          ],
+                          "type": "typography",
+                          "variant": "caption"
+                        },
+                        {
+                          "children": [
+                            {
+                              "action": "TUT_NEXT",
+                              "label": [
+                                "if",
+                                [
+                                  ">",
+                                  [
+                                    "array/len",
+                                    "@config.steps"
+                                  ],
+                                  1.0
+                                ],
+                                "Next ▶",
+                                "Got it"
+                              ],
+                              "type": "button",
+                              "variant": "primary"
+                            },
+                            {
+                              "action": "TUT_DISMISS",
+                              "label": "Skip",
+                              "type": "button",
+                              "variant": "secondary"
+                            }
+                          ],
+                          "className": "pt-2",
+                          "direction": "horizontal",
+                          "justify": "center",
+                          "type": "stack"
+                        }
+                      ],
+                      "className": "bg-card text-card-foreground border border-border rounded-lg shadow-lg p-6 max-w-md mx-auto mt-16",
+                      "direction": "vertical",
+                      "type": "stack"
+                    }
+                  ]
+                ],
+                "event": "SHOW",
+                "eventId": "evt_01M0PEDYJ1ZSPPQSFWHNDRMQM7",
+                "from": "hidden",
+                "to": "showing"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.step",
+                    [
+                      "+",
+                      "@entity.step",
+                      1.0
+                    ]
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    {
+                      "children": [
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "title"
+                          ],
+                          "type": "typography",
+                          "variant": "h4",
+                          "weight": "bold"
+                        },
+                        {
+                          "alt": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "mediaAlt"
+                          ],
+                          "asset": {
+                            "category": "tutorial",
+                            "name": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                "@entity.step"
+                              ],
+                              "id"
+                            ],
+                            "url": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                "@entity.step"
+                              ],
+                              "media"
+                            ]
+                          },
+                          "className": "rounded-md",
+                          "fit": "contain",
+                          "type": "atlas-image"
+                        },
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "body"
+                          ],
+                          "type": "typography",
+                          "variant": "body"
+                        },
+                        {
+                          "align": "center",
+                          "content": [
+                            "str/concat",
+                            [
+                              "+",
+                              "@entity.step",
+                              1.0
+                            ],
+                            " / ",
+                            [
+                              "array/len",
+                              "@config.steps"
+                            ]
+                          ],
+                          "type": "typography",
+                          "variant": "caption"
+                        },
+                        {
+                          "children": [
+                            {
+                              "action": "TUT_BACK",
+                              "label": "◀ Back",
+                              "type": "button",
+                              "variant": "secondary"
+                            },
+                            {
+                              "action": "TUT_NEXT",
+                              "label": [
+                                "if",
+                                [
+                                  "<",
+                                  [
+                                    "+",
+                                    "@entity.step",
+                                    1.0
+                                  ],
+                                  [
+                                    "array/len",
+                                    "@config.steps"
+                                  ]
+                                ],
+                                "Next ▶",
+                                "Got it"
+                              ],
+                              "type": "button",
+                              "variant": "primary"
+                            },
+                            {
+                              "action": "TUT_DISMISS",
+                              "label": "Skip",
+                              "type": "button",
+                              "variant": "secondary"
+                            }
+                          ],
+                          "className": "pt-2",
+                          "direction": "horizontal",
+                          "justify": "center",
+                          "type": "stack"
+                        }
+                      ],
+                      "className": "bg-card text-card-foreground border border-border rounded-lg shadow-lg p-6 max-w-md mx-auto mt-16",
+                      "direction": "vertical",
+                      "type": "stack"
+                    }
+                  ]
+                ],
+                "event": "TUT_NEXT",
+                "eventId": "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3",
+                "from": "showing",
+                "guard": [
+                  "<",
+                  [
+                    "+",
+                    "@entity.step",
+                    1.0
+                  ],
+                  [
+                    "array/len",
+                    "@config.steps"
+                  ]
+                ],
+                "to": "showing"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.done",
+                    true
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    null
+                  ],
+                  [
+                    "emit",
+                    "TUTORIAL_DONE",
+                    {
+                      "id": "tutorial"
+                    }
+                  ]
+                ],
+                "event": "TUT_NEXT",
+                "eventId": "evt_01M0PEDYJ1H3T1HA0PQXNTRDA3",
+                "from": "showing",
+                "guard": [
+                  ">=",
+                  [
+                    "+",
+                    "@entity.step",
+                    1.0
+                  ],
+                  [
+                    "array/len",
+                    "@config.steps"
+                  ]
+                ],
+                "to": "hidden"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.step",
+                    [
+                      "-",
+                      "@entity.step",
+                      1.0
+                    ]
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    {
+                      "children": [
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "title"
+                          ],
+                          "type": "typography",
+                          "variant": "h4",
+                          "weight": "bold"
+                        },
+                        {
+                          "alt": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "mediaAlt"
+                          ],
+                          "asset": {
+                            "category": "tutorial",
+                            "name": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                "@entity.step"
+                              ],
+                              "id"
+                            ],
+                            "url": [
+                              "object/get",
+                              [
+                                "array/nth",
+                                "@config.steps",
+                                "@entity.step"
+                              ],
+                              "media"
+                            ]
+                          },
+                          "className": "rounded-md",
+                          "fit": "contain",
+                          "type": "atlas-image"
+                        },
+                        {
+                          "content": [
+                            "object/get",
+                            [
+                              "array/nth",
+                              "@config.steps",
+                              "@entity.step"
+                            ],
+                            "body"
+                          ],
+                          "type": "typography",
+                          "variant": "body"
+                        },
+                        {
+                          "align": "center",
+                          "content": [
+                            "str/concat",
+                            [
+                              "+",
+                              "@entity.step",
+                              1.0
+                            ],
+                            " / ",
+                            [
+                              "array/len",
+                              "@config.steps"
+                            ]
+                          ],
+                          "type": "typography",
+                          "variant": "caption"
+                        },
+                        {
+                          "children": [
+                            {
+                              "action": "TUT_BACK",
+                              "label": "◀ Back",
+                              "type": "button",
+                              "variant": "secondary"
+                            },
+                            {
+                              "action": "TUT_NEXT",
+                              "label": [
+                                "if",
+                                [
+                                  "<",
+                                  [
+                                    "+",
+                                    "@entity.step",
+                                    1.0
+                                  ],
+                                  [
+                                    "array/len",
+                                    "@config.steps"
+                                  ]
+                                ],
+                                "Next ▶",
+                                "Got it"
+                              ],
+                              "type": "button",
+                              "variant": "primary"
+                            },
+                            {
+                              "action": "TUT_DISMISS",
+                              "label": "Skip",
+                              "type": "button",
+                              "variant": "secondary"
+                            }
+                          ],
+                          "className": "pt-2",
+                          "direction": "horizontal",
+                          "justify": "center",
+                          "type": "stack"
+                        }
+                      ],
+                      "className": "bg-card text-card-foreground border border-border rounded-lg shadow-lg p-6 max-w-md mx-auto mt-16",
+                      "direction": "vertical",
+                      "type": "stack"
+                    }
+                  ]
+                ],
+                "event": "TUT_BACK",
+                "eventId": "evt_01M0PEDYJ1GA0KV2EHBHT5NGB8",
+                "from": "showing",
+                "guard": [
+                  ">",
+                  "@entity.step",
+                  0.0
+                ],
+                "to": "showing"
+              },
+              {
+                "effects": [
+                  [
+                    "set",
+                    "@entity.done",
+                    true
+                  ],
+                  [
+                    "render-ui",
+                    "overlay",
+                    null
+                  ],
+                  [
+                    "emit",
+                    "TUTORIAL_DONE",
+                    {
+                      "id": "tutorial"
+                    }
+                  ]
+                ],
+                "event": "TUT_DISMISS",
+                "eventId": "evt_01M0PEDYJ1B3KT6WAQ36ESVPBC",
+                "from": "showing",
+                "to": "hidden"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ],
+  "schemaVersion": 1,
+  "version": "1.0.0"
+}