// Composed reference using the shipped UI components.
page DesignProfile {
  state saved = false
  seo {
    title = "Workspace example"
  }
  view {
    <div class="workspace-preview">
      <header class="workspace-topbar">
        <a class="workspace-brand" href="/preview/workspace"><span class="workspace-mark">W</span>WRNexus<span class="workspace-preview-label">Example</span></a>
        <nav aria-label="Preview tools"><a href="/components/button">Components</a><button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"><span class="icon-[lucide--sun]" aria-hidden="true"></span></button><button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"><span class="icon-[lucide--moon]" aria-hidden="true"></span></button><span class="workspace-avatar" aria-label="Sample user">JD</span></nav>
      </header>
        <div class="workspace-shell">
          <aside class="workspace-sidebar">
            <div class="workspace-organization"><span class="workspace-avatar">S</span><div><strong>Studio workspace</strong><small>Personal account</small></div></div>
            <nav aria-label="Workspace preview"><span class="workspace-nav-label">WORKSPACE</span><a href="/preview/workspace" aria-current="false"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span>Overview</a><a href="/preview/profile" aria-current="page"><span class="icon-[lucide--user-round]" aria-hidden="true"></span>Profile &amp; preferences</a><a href="/preview/sign-in"><span class="icon-[lucide--log-in]" aria-hidden="true"></span>Sign in preview</a></nav>
            <a class="workspace-library-link" href="/">Browse component library <span aria-hidden="true">↗</span></a>
          </aside>
          <main class="workspace-main">

              <PageHeader title="Profile & preferences" description="The details that make this workspace yours." variant="minimal" borderBottom="false" maxWidth="full" />
              <form class="workspace-settings" @submit="event.preventDefault(); saved = true">
                <section class="workspace-settings-section"><div><h2>Personal details</h2><p>How you appear to your team.</p></div><div class="workspace-fields"><div class="workspace-field-row"><Input id="preview-first" name="firstName" label="First name" value="Jamie" required="true" /><Input id="preview-last" name="lastName" label="Last name" value="Davis" required="true" /></div><Input id="profile-email" name="email" label="Email address" type="email" value="jamie@example.com" required="true" /><Input id="preview-role" name="role" label="Role" value="Product designer" /></div></section>
                <section class="workspace-settings-section"><div><h2>Notifications</h2><p>Choose what you want to hear about.</p></div><div class="workspace-fields"><Checkbox name="updates" label="Product updates" description="New features and improvements to your workspace." checked="true" /><Checkbox name="activity" label="Workspace activity" description="Invitations and important team updates." checked="true" /></div></section>
                <div class="workspace-settings-actions"><span role="status">{saved ? "Preview saved. No account data was changed." : "Changes apply to this preview only."}</span><Button label="Save changes" type="submit" /></div>
              </form>

            <footer class="workspace-footer"><span>© 2026 WRNexus</span><span>Sample workspace · Light &amp; dark preview</span></footer>
          </main>
        </div>

    </div>
  }
}