{
  "name": "onb-tutorial-steps",
  "kind": "block",
  "primary": "div",
  "page": "/apps/user-flow/app/onboarding/first-action/first-action.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-onb-form": ""
  },
  "html": "<div data-onb-form>\n          <div data-onb-tutorial>\n            <div data-onb-tutorial-step>\n              <span data-step-num>1</span>\n              <div data-step-body>\n                <text-ui strong>Describe what you want.</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">One sentence in plain English. AdiaUI picks the right components and wires them up.</text-ui>\n              </div>\n            </div>\n\n            <field-ui label=\"Prompt\">\n              <input-ui\n                name=\"intent\"\n                placeholder=\"A weekly revenue dashboard with a 6-month trend\"\n                value=\"A weekly revenue dashboard with a 6-month trend\"\n              ></input-ui>\n            </field-ui>\n\n            <div data-onb-tutorial-step>\n              <span data-step-num>2</span>\n              <div data-step-body>\n                <text-ui strong>Generate.</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Takes 1–3 seconds. The result lands editable on your canvas.</text-ui>\n              </div>\n            </div>\n\n            <div data-onb-tutorial-step>\n              <span data-step-num>3</span>\n              <div data-step-body>\n                <text-ui strong>Edit and share.</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Move blocks, change palettes, swap data sources. Share via link, embed, or export to PNG.</text-ui>\n              </div>\n            </div>\n\n            <button-ui text=\"Generate dashboard\" variant=\"primary\" icon=\"sparkle\"></button-ui>\n          </div>\n\n          <text-ui color=\"subtle\" size=\"sm\"\n            >After generation we'll save the result to your workspace and continue to the next step. You can return to it any time from the sidebar.</text-ui\n          >\n        </div>",
  "source": "apps/user-flow/app/onboarding/first-action/first-action.contents.html",
  "metadata": {
    "domain": "onboarding",
    "description": "Tutorial step list — interactive checklist of setup tasks with completion tracking.",
    "keywords": [
      "onboarding",
      "tutorial",
      "steps",
      "checklist",
      "tasks",
      "setup",
      "guide"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "textContent": "1",
      "data-step-num": ""
    },
    {
      "id": "text-2",
      "component": "Text",
      "strong": true,
      "textContent": "Describe what you want."
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "One sentence in plain English. AdiaUI picks the right components and wires them up."
    },
    {
      "id": "column-3",
      "component": "Column",
      "data-step-body": "",
      "children": [
        "text-2",
        "text-3"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "data-onb-tutorial-step": "",
      "children": [
        "text",
        "column-3"
      ]
    },
    {
      "id": "intent",
      "component": "Input",
      "name": "intent",
      "placeholder": "A weekly revenue dashboard with a 6-month trend",
      "value": "A weekly revenue dashboard with a 6-month trend"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Prompt",
      "children": [
        "intent"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "textContent": "2",
      "data-step-num": ""
    },
    {
      "id": "text-5",
      "component": "Text",
      "strong": true,
      "textContent": "Generate."
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Takes 1–3 seconds. The result lands editable on your canvas."
    },
    {
      "id": "column-5",
      "component": "Column",
      "data-step-body": "",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "data-onb-tutorial-step": "",
      "children": [
        "text-4",
        "column-5"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "3",
      "data-step-num": ""
    },
    {
      "id": "text-8",
      "component": "Text",
      "strong": true,
      "textContent": "Edit and share."
    },
    {
      "id": "text-9",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Move blocks, change palettes, swap data sources. Share via link, embed, or export to PNG."
    },
    {
      "id": "column-7",
      "component": "Column",
      "data-step-body": "",
      "children": [
        "text-8",
        "text-9"
      ]
    },
    {
      "id": "column-6",
      "component": "Column",
      "data-onb-tutorial-step": "",
      "children": [
        "text-7",
        "column-7"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "sparkle",
      "text": "Generate dashboard",
      "variant": "primary"
    },
    {
      "id": "column",
      "component": "Column",
      "data-onb-tutorial": "",
      "children": [
        "column-2",
        "field",
        "column-4",
        "column-6",
        "button"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "After generation we'll save the result to your workspace and continue to the next step. You can return to it any time from the sidebar."
    },
    {
      "id": "root",
      "component": "Column",
      "data-onb-form": "",
      "children": [
        "column",
        "text-10"
      ]
    }
  ]
}