{
  "name": "reg-story-pane",
  "kind": "block",
  "primary": "aside",
  "instances": [
    {
      "page": "/apps/user-flow/app/registration/address/address.contents.html",
      "source": "apps/user-flow/app/registration/address/address.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Where you operate.</h2>\n          <p>\n            We use the headquarters address for legal correspondence and the billing address for invoices and contracts. The form adapts to the country you pick\n            — different regions have different field shapes (state vs county, ZIP vs postcode, prefecture-first ordering).\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Workspace setup · Step 2 of 8 · Address</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/billing/billing.contents.html",
      "source": "apps/user-flow/app/registration/billing/billing.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Secure, transparent billing.</h2>\n          <p>\n            We won't charge you until your 14-day Pro trial ends. You'll get an email three days before that — cancel anytime up to the moment of charge with\n            one click.\n          </p>\n          <col-ui gap=\"3\">\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"lock\" color=\"success\"></icon-ui>\n              <text-ui>PCI-DSS Level 1 · TLS 1.3 in transit</text-ui>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"receipt\" color=\"success\"></icon-ui>\n              <text-ui>Itemized monthly invoices · downloadable</text-ui>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"x-circle\" color=\"success\"></icon-ui>\n              <text-ui>Cancel anytime · prorated refund</text-ui>\n            </row-ui>\n          </col-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/brand-scrape/brand-scrape.contents.html",
      "source": "apps/user-flow/app/registration/brand-scrape/brand-scrape.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Save 20 minutes of copy-paste.</h2>\n          <p>\n            Drop your company URL and we'll scan your site for the brand basics — logo, palette, tagline, social links — so you don't have to upload them by\n            hand. Everything we find is editable before it lands in your workspace.\n          </p>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"sparkle\" color=\"accent\"></icon-ui>\n            <text-ui color=\"subtle\" size=\"sm\">AI-assisted · everything you confirm is final</text-ui>\n          </row-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/confirmation/confirmation.contents.html",
      "source": "apps/user-flow/app/registration/confirmation/confirmation.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Welcome to AdiaUI.</h2>\n          <p>\n            Your workspace is live. Three teammates are getting their invites right now, your Notion import is processing in the background, and your Slack and\n            GitHub integrations are ready to wire up.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">→ You're on the Pro plan, 14 days free. We'll email you before the trial ends.</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/departments/departments.contents.html",
      "source": "apps/user-flow/app/registration/departments/departments.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Group by function.</h2>\n          <p>\n            Departments shape access control, reporting groupings, and the org-chart view. We've pre-checked the ones most teams your size run with — uncheck\n            anything you don't have, and add custom ones at the bottom.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Team setup · Step 5 of 8 · Departments</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/done/done.contents.html",
      "source": "apps/user-flow/app/registration/done/done.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Welcome to your workspace.</h2>\n          <p>\n            Everything's wired and waiting. Members are getting their invites, your support routing is live, and your dashboard is ready with sample data so you\n            can click around immediately.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">→ Pro plan, 14 days free. We'll email you 3 days before your trial ends.</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/import/import.contents.html",
      "source": "apps/user-flow/app/registration/import/import.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Bring your existing data.</h2>\n          <p>\n            Import projects, tasks, and members from your previous tool — we'll map fields automatically and surface anything that needs your attention. The\n            import runs in the background; you can keep moving.\n          </p>\n          <col-ui gap=\"2\">\n            <text-ui color=\"subtle\" size=\"sm\">Supported sources</text-ui>\n            <row-ui gap=\"2\">\n              <tag-ui text=\"Notion\"></tag-ui>\n              <tag-ui text=\"Asana\"></tag-ui>\n              <tag-ui text=\"Trello\"></tag-ui>\n              <tag-ui text=\"Linear\"></tag-ui>\n              <tag-ui text=\"Jira\"></tag-ui>\n              <tag-ui text=\"CSV\"></tag-ui>\n            </row-ui>\n          </col-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/integrations/integrations.contents.html",
      "source": "apps/user-flow/app/registration/integrations/integrations.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Connect your stack.</h2>\n          <p>\n            Wire AdiaUI into the tools your team already uses. Each integration runs read-only by default — you decide later what gets full access. You can\n            change all of this from settings whenever.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">→ Sync notifications, files, mentions, and links across your toolchain.</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/invite/invite.contents.html",
      "source": "apps/user-flow/app/registration/invite/invite.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Bring your team along.</h2>\n          <p>\n            Workspaces are better with company. Invite teammates now — we'll send each person a one-click join link. You can always invite more from settings\n            later.\n          </p>\n          <card-ui>\n            <header>\n              <avatar-ui slot=\"icon\" text=\"Maya P.\" size=\"sm\"></avatar-ui>\n              <span slot=\"heading\">\n                <text-ui strong>Maya Patel</text-ui>\n              </span>\n              <span slot=\"description\">\n                <text-ui color=\"subtle\" size=\"sm\">\"We had everyone in by lunch. The invite UX is the smoothest I've used.\"</text-ui>\n              </span>\n            </header>\n          </card-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/legal/legal.contents.html",
      "source": "apps/user-flow/app/registration/legal/legal.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Verify your business identity.</h2>\n          <p>\n            We use these details for invoicing, tax compliance, and the verified-business badge that surfaces in member directories and audit exports. Updates\n            land in admin → workspace → legal any time.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Workspace setup · Step 1 of 8 · Legal &amp; tax</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/org-review/org-review.contents.html",
      "source": "apps/user-flow/app/registration/org-review/org-review.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>AI-generated, you decide.</h2>\n          <p>\n            We crossed your invite list with public LinkedIn data and the email-domain signals to draft a reporting structure. It won't be perfect — review each\n            member, fix what's off, and click \"Confirm\". Anything you skip stays as inferred until an admin reviews it.\n          </p>\n          <row-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"sparkle\" color=\"accent\"></icon-ui>\n            <text-ui color=\"subtle\" size=\"sm\">AI-assisted · 8 members reviewed · 3 inferred · 1 needs your call</text-ui>\n          </row-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/personal/personal.contents.html",
      "source": "apps/user-flow/app/registration/personal/personal.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story data-chunk-slot=\"page-story\">\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Be findable.</h2>\n          <p>\n            These details show up in directory search, mentions, and the timezone-aware \"@available now\" indicator on your profile. None of this is required —\n            you can fill it in whenever, or never.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">User setup · Step 7 of 8 · Personal profile</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/plan/plan.contents.html",
      "source": "apps/user-flow/app/registration/plan/plan.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Pick what fits.</h2>\n          <p>Every plan starts with a 14-day Pro trial. Cancel during the trial and you'll drop to Free with no charge. No credit card required to continue.</p>\n          <col-ui gap=\"2\">\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <text-ui>Unlimited projects on every plan</text-ui>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <text-ui>Cancel or change plans anytime</text-ui>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <text-ui>Annual billing saves 20%</text-ui>\n            </row-ui>\n          </col-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/profile/profile.contents.html",
      "source": "apps/user-flow/app/registration/profile/profile.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>How will you appear?</h2>\n          <p>Your name and avatar show up in conversations, comments, and on your projects. Pick something that helps teammates recognize you at a glance.</p>\n          <row-ui gap=\"3\" align=\"center\">\n            <avatar-ui text=\"Jane Doe\" size=\"lg\"></avatar-ui>\n            <col-ui gap=\"0\">\n              <text-ui strong>Jane Doe</text-ui>\n              <text-ui color=\"subtle\" size=\"sm\">Product designer · Acme</text-ui>\n            </col-ui>\n          </row-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/support/support.contents.html",
      "source": "apps/user-flow/app/registration/support/support.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>One inbox, multiple channels.</h2>\n          <p>\n            Customers reach you through whichever surface is closest at hand — your help-desk tool, a public email, a phone tree. Wire the channels here and\n            we'll route inbound questions through your help-desk integration so nothing goes missing.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Workspace setup · Step 4 of 8 · Support</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/team-size/team-size.contents.html",
      "source": "apps/user-flow/app/registration/team-size/team-size.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Right-size your workspace.</h2>\n          <p>\n            We'll suggest a plan and recommend collaboration features that work well at your team's size. Solo, small team, or company-wide — each has a\n            different default setup.\n          </p>\n          <row-ui gap=\"2\">\n            <avatar-ui text=\"A\" size=\"sm\"></avatar-ui>\n            <avatar-ui text=\"B\" size=\"sm\"></avatar-ui>\n            <avatar-ui text=\"C\" size=\"sm\"></avatar-ui>\n            <avatar-ui text=\"D\" size=\"sm\"></avatar-ui>\n            <avatar-ui text=\"+12\" size=\"sm\"></avatar-ui>\n          </row-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/use-case/use-case.contents.html",
      "source": "apps/user-flow/app/registration/use-case/use-case.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Tailor your experience.</h2>\n          <p>\n            We use this to suggest templates, integrations, and onboarding content that match how you'll actually use the product. You can change it later from\n            settings.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">No wrong answers — pick the closest match.</text-ui>\n        </div>\n      </aside>"
    },
    {
      "page": "/apps/user-flow/app/registration/workspace/workspace.contents.html",
      "source": "apps/user-flow/app/registration/workspace/workspace.contents.html",
      "slots": [],
      "nested": [],
      "attrs": {
        "data-reg-story": ""
      },
      "html": "<aside data-reg-story>\n        <a data-reg-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\n        <div data-reg-story-content>\n          <h2>Build your team's home.</h2>\n          <p>\n            A workspace is where conversations, projects, and integrations live. Most teams start with one — name it after your company and add more rooms\n            inside as you grow.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10 · Workspace setup</text-ui>\n        </div>\n      </aside>"
    }
  ],
  "captured_at": "2026-06-07T19:28:13.657Z",
  "metadata": {
    "domain": "forms",
    "description": "Registration left story pane — brand illustration and product value messaging panel.",
    "keywords": [
      "registration",
      "sidebar",
      "story",
      "pane",
      "brand",
      "illustration",
      "value"
    ]
  }
}