{
  "name": "onb-story-pane",
  "kind": "block",
  "primary": "aside",
  "instances": [
    {
      "page": "/apps/user-flow/app/onboarding/browser-extension/browser-extension.contents.html",
      "source": "apps/user-flow/app/onboarding/browser-extension/browser-extension.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Bring AdiaUI to every tab.</h2>\n          <p>\n            The browser extension surfaces a quick-search palette from any site (<kbd-ui>⌘</kbd-ui> <kbd-ui>K</kbd-ui>), shows mention notifications inline, and\n            lets you snip the current page into a dashboard with one click. Optional — Chrome, Firefox, and Edge supported.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 9 of 10 · Browser extension · Optional</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/complete/complete.contents.html",
      "source": "apps/user-flow/app/onboarding/complete/complete.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>You're set up. Welcome to the team.</h2>\n          <p>\n            Your home is waiting — your first dashboard, the quick-search palette, the integrations you connected. From here, the most common next moves are\n            inviting your team, generating more dashboards, or browsing what other people on AdiaUI have built.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 10 of 10 · All set</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/connect-source/connect-source.contents.html",
      "source": "apps/user-flow/app/onboarding/connect-source/connect-source.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>One connection unlocks the rest.</h2>\n          <p>\n            Pick the source where most of your work happens. AdiaUI reads live data through a one-way OAuth handshake — we don't store credentials, and you can\n            revoke access from your provider's admin panel any time. Add more sources later from settings.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 3 of 10 · Connect a source</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/first-action/first-action.contents.html",
      "source": "apps/user-flow/app/onboarding/first-action/first-action.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>The point isn't onboarding — it's the work.</h2>\n          <p>\n            Let's actually do something useful. We'll generate a dashboard from a one-line description, like you'll do every day after this. The pattern below\n            is the whole product in miniature: type intent, get a working surface, edit it.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 5 of 10 · First action</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/import-data/import-data.contents.html",
      "source": "apps/user-flow/app/onboarding/import-data/import-data.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Don't start from a blank page.</h2>\n          <p>\n            Sample data lets you click around immediately and see real dashboards. When you're ready, swap to your live source — the same charts and queries\n            point at your data instead. Or skip ahead and configure later.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 4 of 10 · Bring your data</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/mobile-app/mobile-app.contents.html",
      "source": "apps/user-flow/app/onboarding/mobile-app/mobile-app.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Look at your dashboards from anywhere.</h2>\n          <p>\n            The mobile app gives you read-only access to your workspace — dashboards, alerts, mentions — without the noise of full editing tools. Useful for the\n            standup commute, the airport lounge, or responding to alerts without opening a laptop.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 8 of 10 · Mobile app · Optional</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/mode/mode.contents.html",
      "source": "apps/user-flow/app/onboarding/mode/mode.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Tell us how you'll use AdiaUI.</h2>\n          <p>\n            We'll prioritize features for your role — pre-pin dashboards, suggest the right integrations, hide noise. You can switch any time, and adding\n            teammates with different roles later just works.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 2 of 10 · Mode</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/notification-prefs/notification-prefs.contents.html",
      "source": "apps/user-flow/app/onboarding/notification-prefs/notification-prefs.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Stay informed without the noise.</h2>\n          <p>\n            Pick the rhythm that matches your team. Daily digests are best if you live in dashboards; weekly is enough if you check in on Mondays; mentions-only\n            treats AdiaUI like a tool that pings only when something's actually for you. Always editable later.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 7 of 10 · Notifications</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/review/review.contents.html",
      "source": "apps/user-flow/app/onboarding/review/review.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story>\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Halfway. Let's check the work.</h2>\n          <p>\n            Quick recap of what's been configured. Anything wrong? Click Edit on a row to jump back. Otherwise carry on — only a few steps left, and the rest\n            are optional preferences.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 6 of 10 · Review</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/onboarding/welcome/welcome.contents.html",
      "source": "apps/user-flow/app/onboarding/welcome/welcome.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-onb-story": ""
      },
      "html": "<aside data-onb-story data-chunk-slot=\"page-story\">\n        <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <image-ui src=\"/icons/agent-ui-light.svg\" alt=\"\" aria-hidden=\"true\"></image-ui>\n          <strong>AdiaUI</strong>\n        </a>\n        <div data-onb-story-content>\n          <h2>Welcome aboard, Kim.</h2>\n          <p>\n            You're three minutes away from your first usable workspace. We'll walk through the essentials — pick how you'll use it, connect a data source, see\n            your first dashboard come to life. Skip anything you'd rather come back to later.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10 · Onboarding</text-ui>\n        </div>\n      </aside>"
    }
  ],
  "captured_at": "2026-06-07T19:28:13.657Z",
  "metadata": {
    "domain": "onboarding",
    "description": "Onboarding left story pane — decorative panel with brand illustration or benefit bullets.",
    "keywords": [
      "onboarding",
      "sidebar",
      "story",
      "pane",
      "illustration",
      "benefits",
      "brand"
    ]
  }
}