feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

- Sync app, public, scripts, test and examples from the framework's
  component-showcase: redesigned component demos, marketing blocks under
  /blocks, template and preview galleries, distinct Timeline/Section
  variants, Chat Bubble receipts, a top-placement Drawer demo, and the
  playground code panel fix (objects in array props no longer blank out).
- Standalone adaptations kept: the generator and tests read
  component-reference.json from the published @wrnexus/ui, and tests use
  the published @wrnexus/compiler and @wrnexus/syntax.
- Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88,
  styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the
  playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/pages/preview/custom-modal.wrn

@@ -0,0 +1,7 @@
+page CustomModalExample {
+ state dialogOpen: boolean = false
+ view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="{dialogOpen}" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CustomModalExample <span>&#123;</span>
+ state dialogOpen: boolean = false
+ view <span>&#123;</span> &lt;main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Your own modal controls&lt;/h1&gt;&lt;Button label="Invite a teammate" @click="dialogOpen = true" /&gt;&lt;Modal open="<span>&#123;</span>dialogOpen<span>&#125;</span>" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""&gt;&lt;div data-slot="header"&gt;&lt;h2&gt;Invite a teammate&lt;/h2&gt;&lt;/div&gt;&lt;Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /&gt;&lt;div data-slot="footer"&gt;&lt;Button label="Cancel" variant="secondary" @click="dialogOpen = false" /&gt;&lt;Button label="Done" @click="dialogOpen = false" /&gt;&lt;/div&gt;&lt;/Modal&gt;&lt;/main&gt; <span>&#125;</span>
+<span>&#125;</span></code></pre></section> } }

app/pages/preview/index.wrn

@@ -0,0 +1,5 @@
+page PreviewIndex {
+ layout = "gallery"
+ seo { title = "Examples" }
+ view { <header class="docs-intro"><span class="showcase-eyebrow">Ready to use</span><h1>Page examples</h1><p>Explore complete layouts, interact with the controls, and copy the source.</p></header><div class="example-catalog"><a class="example-card" href="/preview/workspace"><div class="example-card__art"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span></div><div><h2>Workspace overview</h2><p>A complete dashboard with navigation, metrics, and service cards.</p><strong>Open example →</strong></div></a><a class="example-card" href="/preview/profile"><div class="example-card__art"><span class="icon-[lucide--user-round]" aria-hidden="true"></span></div><div><h2>Profile & preferences</h2><p>A responsive settings form with grouped fields and save feedback.</p><strong>Open example →</strong></div></a><a class="example-card" href="/preview/sign-in"><div class="example-card__art"><span class="icon-[lucide--log-in]" aria-hidden="true"></span></div><div><h2>Sign in</h2><p>A focused authentication page with a compact form.</p><strong>Open example →</strong></div></a><a class="example-card" href="/preview/scheduling"><div class="example-card__art"><span class="icon-[lucide--calendar-days]" aria-hidden="true"></span></div><div><h2>Scheduling</h2><p>Date, date-and-time, and time controls in a practical form.</p><strong>Open example →</strong></div></a><a class="example-card" href="/preview/custom-modal"><div class="example-card__art"><span class="icon-[lucide--panels-top-left]" aria-hidden="true"></span></div><div><h2>Custom modal</h2><p>Open and close a fully controlled dialog from your own buttons.</p><strong>Open example →</strong></div></a><a class="example-card" href="/preview/project-board"><div class="example-card__art"><span class="icon-[lucide--list-checks]" aria-hidden="true"></span></div><div><h2>Project workspace</h2><p>Reorder priorities and write rich-text project updates.</p><strong>Open example →</strong></div></a></div> }
+}

app/pages/preview/profile.wrn

@@ -0,0 +1,621 @@
+// Composed reference using the shipped UI components.
+page DesignProfile {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>
+    <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>␍<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">// Composed reference using the shipped UI components.
+page DesignProfile <span>&#123;</span>
+  state saved = false
+  seo <span>&#123;</span>
+    title = "Workspace example"
+  <span>&#125;</span>
+  view <span>&#123;</span>
+    &lt;div class="workspace-preview"&gt;
+      &lt;header class="workspace-topbar"&gt;
+        &lt;a class="workspace-brand" href="/preview/workspace"&gt;&lt;span class="workspace-mark"&gt;W&lt;/span&gt;WRNexus&lt;span class="workspace-preview-label"&gt;Example&lt;/span&gt;&lt;/a&gt;
+        &lt;nav aria-label="Preview tools"&gt;&lt;a href="/components/button"&gt;Components&lt;/a&gt;&lt;button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"&gt;&lt;span class="icon-[lucide--sun]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"&gt;&lt;span class="icon-[lucide--moon]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;span class="workspace-avatar" aria-label="Sample user"&gt;JD&lt;/span&gt;&lt;/nav&gt;
+      &lt;/header&gt;
+        &lt;div class="workspace-shell"&gt;
+          &lt;aside class="workspace-sidebar"&gt;
+            &lt;div class="workspace-organization"&gt;&lt;span class="workspace-avatar"&gt;S&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Studio workspace&lt;/strong&gt;&lt;small&gt;Personal account&lt;/small&gt;&lt;/div&gt;&lt;/div&gt;
+            &lt;nav aria-label="Workspace preview"&gt;&lt;span class="workspace-nav-label"&gt;WORKSPACE&lt;/span&gt;&lt;a href="/preview/workspace" aria-current="false"&gt;&lt;span class="icon-[lucide--layout-dashboard]" aria-hidden="true"&gt;&lt;/span&gt;Overview&lt;/a&gt;&lt;a href="/preview/profile" aria-current="page"&gt;&lt;span class="icon-[lucide--user-round]" aria-hidden="true"&gt;&lt;/span&gt;Profile &amp;amp; preferences&lt;/a&gt;&lt;a href="/preview/sign-in"&gt;&lt;span class="icon-[lucide--log-in]" aria-hidden="true"&gt;&lt;/span&gt;Sign in preview&lt;/a&gt;&lt;/nav&gt;
+            &lt;a class="workspace-library-link" href="/"&gt;Browse component library &lt;span aria-hidden="true"&gt;↗&lt;/span&gt;&lt;/a&gt;
+          &lt;/aside&gt;
+          &lt;main class="workspace-main"&gt;
+
+              &lt;PageHeader title="Profile &amp; preferences" description="The details that make this workspace yours." variant="minimal" borderBottom="false" maxWidth="full" /&gt;
+              &lt;form class="workspace-settings" @submit="event.preventDefault(); saved = true"&gt;
+                &lt;section class="workspace-settings-section"&gt;&lt;div&gt;&lt;h2&gt;Personal details&lt;/h2&gt;&lt;p&gt;How you appear to your team.&lt;/p&gt;&lt;/div&gt;&lt;div class="workspace-fields"&gt;&lt;div class="workspace-field-row"&gt;&lt;Input id="preview-first" name="firstName" label="First name" value="Jamie" required="true" /&gt;&lt;Input id="preview-last" name="lastName" label="Last name" value="Davis" required="true" /&gt;&lt;/div&gt;&lt;Input id="profile-email" name="email" label="Email address" type="email" value="jamie@example.com" required="true" /&gt;&lt;Input id="preview-role" name="role" label="Role" value="Product designer" /&gt;&lt;/div&gt;&lt;/section&gt;
+                &lt;section class="workspace-settings-section"&gt;&lt;div&gt;&lt;h2&gt;Notifications&lt;/h2&gt;&lt;p&gt;Choose what you want to hear about.&lt;/p&gt;&lt;/div&gt;&lt;div class="workspace-fields"&gt;&lt;Checkbox name="updates" label="Product updates" description="New features and improvements to your workspace." checked="true" /&gt;&lt;Checkbox name="activity" label="Workspace activity" description="Invitations and important team updates." checked="true" /&gt;&lt;/div&gt;&lt;/section&gt;
+                &lt;div class="workspace-settings-actions"&gt;&lt;span role="status"&gt;<span>&#123;</span>saved ? "Preview saved. No account data was changed." : "Changes apply to this preview only."<span>&#125;</span>&lt;/span&gt;&lt;Button label="Save changes" type="submit" /&gt;&lt;/div&gt;
+              &lt;/form&gt;
+
+            &lt;footer class="workspace-footer"&gt;&lt;span&gt;© 2026 WRNexus&lt;/span&gt;&lt;span&gt;Sample workspace · Light &amp;amp; dark preview&lt;/span&gt;&lt;/footer&gt;
+          &lt;/main&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></section><details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">/* Application composition reference. Component visuals remain in @wrnexus/ui. */
+.workspace-preview <span>&#123;</span>
+  min-height: 100dvh;
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-bg);
+  font: 0.875rem/1.5 var(--wrn-font-sans);
+  -webkit-font-smoothing: antialiased;
+<span>&#125;</span>
+.workspace-preview a <span>&#123;</span>
+  text-decoration: none;
+<span>&#125;</span>
+.workspace-preview h1,
+.workspace-preview h2,
+.workspace-preview p <span>&#123;</span>
+  margin: 0;
+<span>&#125;</span>
+.workspace-topbar <span>&#123;</span>
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-brand,
+.workspace-topbar nav <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-brand <span>&#123;</span>
+  color: var(--wrn-color-text);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+<span>&#125;</span>
+.workspace-mark <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: var(--wrn-color-primary);
+  color: var(--wrn-color-primary-contrast);
+  font-size: 0.875rem;
+<span>&#125;</span>
+.workspace-preview-label <span>&#123;</span>
+  padding-left: 1rem;
+  border-left: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0;
+<span>&#125;</span>
+.workspace-topbar nav a <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-topbar button <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-surface);
+  cursor: pointer;
+<span>&#125;</span>
+.workspace-topbar button span <span>&#123;</span>
+  width: 18px;
+  height: 18px;
+<span>&#125;</span>
+.workspace-avatar <span>&#123;</span>
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: var(--wrn-color-primary-text);
+  background: var(--wrn-color-primary-soft);
+  font-size: 0.6875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-avatar--large <span>&#123;</span>
+  width: 40px;
+  height: 40px;
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-shell <span>&#123;</span>
+  display: grid;
+  grid-template-columns: 232px minmax(0, 1fr);
+  min-height: calc(100dvh - 64px);
+<span>&#125;</span>
+.workspace-sidebar <span>&#123;</span>
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1.5rem 1rem;
+  border-right: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-organization <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.5rem;
+<span>&#125;</span>
+.workspace-organization strong <span>&#123;</span>
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-organization small <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-sidebar nav <span>&#123;</span>
+  display: grid;
+  gap: 0.25rem;
+<span>&#125;</span>
+.workspace-nav-label <span>&#123;</span>
+  margin: 0 0.5rem 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+<span>&#125;</span>
+.workspace-sidebar nav a <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 38px;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-sidebar nav a span <span>&#123;</span>
+  width: 17px;
+  height: 17px;
+  flex: none;
+<span>&#125;</span>
+.workspace-sidebar nav a:hover <span>&#123;</span>
+  background: var(--wrn-color-surface-soft);
+  color: var(--wrn-color-text);
+<span>&#125;</span>
+.workspace-sidebar nav a[aria-current="page"] <span>&#123;</span>
+  background: var(--wrn-color-primary-soft);
+  color: var(--wrn-color-primary-text);
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-library-link <span>&#123;</span>
+  margin-top: auto;
+  padding: 1rem 0.5rem 0;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-main <span>&#123;</span>
+  width: 100%;
+  max-width: 1400px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 0;
+<span>&#125;</span>
+.workspace-main .wrn-page-header__inner <span>&#123;</span>
+  padding: 0 0 1.5rem;
+<span>&#125;</span>
+.workspace-welcome <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-welcome h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-welcome p <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-welcome &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+<span>&#125;</span>
+.workspace-metrics <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+  font-size: 1.5rem;
+<span>&#125;</span>
+.workspace-overview-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
+  gap: 1.5rem;
+<span>&#125;</span>
+.workspace-section <span>&#123;</span>
+  min-width: 0;
+  padding: 1.25rem;
+  background: var(--wrn-color-surface);
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-md);
+<span>&#125;</span>
+.workspace-section &gt; header <span>&#123;</span>
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+<span>&#125;</span>
+.workspace-preview h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+<span>&#125;</span>
+.workspace-section header p,
+.workspace-services header p <span>&#123;</span>
+  margin-top: 0.25rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status <span>&#123;</span>
+  white-space: nowrap;
+  border-radius: 4px;
+  padding: 0.25rem 0.375rem;
+  color: var(--wrn-color-muted);
+  background: var(--wrn-color-surface-soft);
+  font-size: 0.625rem;
+<span>&#125;</span>
+.workspace-steps &gt; div <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.9375rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-steps &gt; div:last-child <span>&#123;</span>
+  border-bottom: 0;
+  padding-bottom: 0;
+<span>&#125;</span>
+.workspace-steps strong <span>&#123;</span>
+  font-size: 0.8125rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-steps p <span>&#123;</span>
+  font-size: 0.6875rem;
+  color: var(--wrn-color-muted);
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-steps &gt; div &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+  flex-shrink: 0;
+<span>&#125;</span>
+.workspace-step-icon <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 50%;
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-step-icon--done <span>&#123;</span>
+  border-color: transparent;
+  color: var(--wrn-color-success-text);
+  background: var(--wrn-color-success-soft);
+<span>&#125;</span>
+.workspace-muted <span>&#123;</span>
+  font-size: 0.75rem;
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-icon <span>&#123;</span>
+  width: 20px;
+  height: 20px;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-status-list <span>&#123;</span>
+  margin: 0 0 1rem;
+<span>&#125;</span>
+.workspace-status-list div <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status-list dt <span>&#123;</span>
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-list dd <span>&#123;</span>
+  margin: 0;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-text-link <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-services <span>&#123;</span>
+  margin-top: 1.75rem;
+<span>&#125;</span>
+.workspace-services &gt; header <span>&#123;</span>
+  margin-bottom: 0.875rem;
+<span>&#125;</span>
+.workspace-service-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body h3 <span>&#123;</span>
+  font-size: 0.875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body p,
+.workspace-service-grid .wrn-next__card-action <span>&#123;</span>
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-footer <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1.5rem 0;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-settings <span>&#123;</span>
+  max-width: 960px;
+<span>&#125;</span>
+.workspace-settings-section <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
+  gap: 2rem;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-settings-section &gt; div &gt; p <span>&#123;</span>
+  margin-top: 0.375rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-fields <span>&#123;</span>
+  min-width: 0;
+  display: grid;
+  gap: 1.25rem;
+<span>&#125;</span>
+.workspace-field-row <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-settings-actions <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1.25rem;
+<span>&#125;</span>
+.workspace-settings-actions &gt; span <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
+  min-height: calc(100dvh - 64px);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-login-form <span>&#123;</span>
+  width: min(360px, calc(100% - 3rem));
+  align-self: center;
+  justify-self: center;
+  padding: 3rem 0;
+<span>&#125;</span>
+.workspace-login-form h1 <span>&#123;</span>
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  margin-top: 0.75rem;
+<span>&#125;</span>
+.workspace-login-form &gt; p <span>&#123;</span>
+  margin-top: 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-login-form form <span>&#123;</span>
+  display: grid;
+  gap: 1.25rem;
+  margin: 2rem 0 1.5rem;
+<span>&#125;</span>
+.workspace-login-form &gt; a <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-kicker <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+<span>&#125;</span>
+.workspace-login-aside <span>&#123;</span>
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: clamp(2rem, 4vw, 4rem);
+  color: #f0f1f4;
+  background: #181a20;
+<span>&#125;</span>
+.workspace-login-aside .workspace-kicker <span>&#123;</span>
+  color: #b5bac5;
+<span>&#125;</span>
+.workspace-login-aside h2 <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 3rem;
+  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+<span>&#125;</span>
+.workspace-login-aside p <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 1.25rem;
+  color: #b5bac5;
+  font-size: 0.875rem;
+  line-height: 1.7;
+<span>&#125;</span>
+.workspace-login-aside small <span>&#123;</span>
+  margin-top: auto;
+  padding-top: 3rem;
+  color: #b5bac5;
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login-lines <span>&#123;</span>
+  position: absolute;
+  width: 550px;
+  height: 550px;
+  border: 1px solid #ffffff12;
+  border-radius: 50%;
+  top: 35%;
+  left: 15%;
+  box-shadow:
+    0 0 0 40px #ffffff04,
+    0 0 0 80px #ffffff04,
+    0 0 0 120px #ffffff04;
+<span>&#125;</span>
+.workspace-feedback <span>&#123;</span>
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+@media (max-width: 1180px) <span>&#123;</span>
+  .workspace-metrics <span>&#123;</span>
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  <span>&#125;</span>
+  .workspace-overview-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 800px) <span>&#123;</span>
+  .workspace-shell <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-sidebar <span>&#123;</span>
+    border-right: 0;
+    border-bottom: 1px solid var(--wrn-color-border);
+    padding: 0.625rem 1rem;
+  <span>&#125;</span>
+  .workspace-sidebar nav <span>&#123;</span>
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+  <span>&#125;</span>
+  .workspace-sidebar nav a <span>&#123;</span>
+    white-space: nowrap;
+  <span>&#125;</span>
+  .workspace-nav-label,
+  .workspace-organization,
+  .workspace-library-link <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-main <span>&#123;</span>
+    padding: 1.5rem 1rem 0;
+  <span>&#125;</span>
+  .workspace-login <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-login-aside <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-service-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 540px) <span>&#123;</span>
+  .workspace-topbar <span>&#123;</span>
+    padding-inline: 1rem;
+  <span>&#125;</span>
+  .workspace-preview-label,
+  .workspace-topbar nav &gt; a <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-topbar nav <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-welcome <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-section &gt; header <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div &gt; :nth-child(2) <span>&#123;</span>
+    flex: 1;
+    min-width: 160px;
+  <span>&#125;</span>
+  .workspace-metrics <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-metrics .wrn-metric-card <span>&#123;</span>
+    padding: 0.875rem;
+  <span>&#125;</span>
+  .workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+    font-size: 1.25rem;
+  <span>&#125;</span>
+  .workspace-settings-section <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+  <span>&#125;</span>
+  .workspace-field-row <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-settings-actions <span>&#123;</span>
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></details>
+  }
+}

app/pages/preview/project-board.wrn

@@ -0,0 +1,7 @@
+page ProjectBoardExample {
+ state tasks = [{label:"Review designs"},{label:"Build the dashboard"},{label:"Test accessibility"}]
+ view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Project workspace</h1><DragAndDrop title="Priorities" description="Drag a row or use its arrow buttons." items="{tasks}" /><WysiwygEditor title="Team update" value="Share what you are working on this week." /></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page ProjectBoardExample <span>&#123;</span>
+ state tasks = [<span>&#123;</span>label:"Review designs"<span>&#125;</span>,<span>&#123;</span>label:"Build the dashboard"<span>&#125;</span>,<span>&#123;</span>label:"Test accessibility"<span>&#125;</span>]
+ view <span>&#123;</span> &lt;main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Project workspace&lt;/h1&gt;&lt;DragAndDrop title="Priorities" description="Drag a row or use its arrow buttons." items="<span>&#123;</span>tasks<span>&#125;</span>" /&gt;&lt;WysiwygEditor title="Team update" value="Share what you are working on this week." /&gt;&lt;/main&gt; <span>&#125;</span>
+<span>&#125;</span></code></pre></section> } }

app/pages/preview/scheduling.wrn

@@ -0,0 +1,5 @@
+page SchedulingExample {
+ view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Schedule a meeting</h1><p>Choose the date and time that work for your team.</p><DatePicker label="Meeting date" name="date" /><DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /><TimePicker label="Start time" name="time" value="09:30" /></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SchedulingExample <span>&#123;</span>
+ view <span>&#123;</span> &lt;main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Schedule a meeting&lt;/h1&gt;&lt;p&gt;Choose the date and time that work for your team.&lt;/p&gt;&lt;DatePicker label="Meeting date" name="date" /&gt;&lt;DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /&gt;&lt;TimePicker label="Start time" name="time" value="09:30" /&gt;&lt;/main&gt; <span>&#125;</span>
+<span>&#125;</span></code></pre></section> } }

app/pages/preview/sign-in.wrn

@@ -0,0 +1,613 @@
+// Composed reference using the shipped UI components.
+page DesignLogin {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>
+    <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>
+        <main class="workspace-login">
+          <section class="workspace-login-form" aria-label="Sign in preview">
+            <span class="workspace-kicker">YOUR WORKSPACE, CONNECTED</span>
+            <h1>Welcome back</h1><p>Sign in to manage your workspace.</p>
+            <form @submit="event.preventDefault(); saved = true">
+              <Input id="preview-email" name="email" label="Email address" type="email" placeholder="you@company.com" required="true" />
+              <TogglePassword id="preview-password" name="password" label="Password" placeholder="Enter your password" required="true" />
+              <Button type="submit" label="Sign in" fullWidth="true" />
+            </form>
+            {#if saved}<p class="workspace-feedback" role="status">Preview complete. No sign-in request was sent.</p>{/if}
+            <a href="/preview/workspace">Explore the workspace preview <span aria-hidden="true">→</span></a>
+          </section>
+          <aside class="workspace-login-aside"><span class="workspace-kicker">BUILT FOR YOUR EVERYDAY</span><h2>A little less busy.<br />A lot more focused.</h2><p>Your team, services, and account.<br />Together in one thoughtful workspace.</p><div class="workspace-login-lines" aria-hidden="true"></div><small>One identity. Every workspace.</small></aside>
+        </main>
+
+    </div>␍<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">// Composed reference using the shipped UI components.
+page DesignLogin <span>&#123;</span>
+  state saved = false
+  seo <span>&#123;</span>
+    title = "Workspace example"
+  <span>&#125;</span>
+  view <span>&#123;</span>
+    &lt;div class="workspace-preview"&gt;
+      &lt;header class="workspace-topbar"&gt;
+        &lt;a class="workspace-brand" href="/preview/workspace"&gt;&lt;span class="workspace-mark"&gt;W&lt;/span&gt;WRNexus&lt;span class="workspace-preview-label"&gt;Example&lt;/span&gt;&lt;/a&gt;
+        &lt;nav aria-label="Preview tools"&gt;&lt;a href="/components/button"&gt;Components&lt;/a&gt;&lt;button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"&gt;&lt;span class="icon-[lucide--sun]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"&gt;&lt;span class="icon-[lucide--moon]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;span class="workspace-avatar" aria-label="Sample user"&gt;JD&lt;/span&gt;&lt;/nav&gt;
+      &lt;/header&gt;
+        &lt;main class="workspace-login"&gt;
+          &lt;section class="workspace-login-form" aria-label="Sign in preview"&gt;
+            &lt;span class="workspace-kicker"&gt;YOUR WORKSPACE, CONNECTED&lt;/span&gt;
+            &lt;h1&gt;Welcome back&lt;/h1&gt;&lt;p&gt;Sign in to manage your workspace.&lt;/p&gt;
+            &lt;form @submit="event.preventDefault(); saved = true"&gt;
+              &lt;Input id="preview-email" name="email" label="Email address" type="email" placeholder="you@company.com" required="true" /&gt;
+              &lt;TogglePassword id="preview-password" name="password" label="Password" placeholder="Enter your password" required="true" /&gt;
+              &lt;Button type="submit" label="Sign in" fullWidth="true" /&gt;
+            &lt;/form&gt;
+            <span>&#123;</span>#if saved<span>&#125;</span>&lt;p class="workspace-feedback" role="status"&gt;Preview complete. No sign-in request was sent.&lt;/p&gt;<span>&#123;</span>/if<span>&#125;</span>
+            &lt;a href="/preview/workspace"&gt;Explore the workspace preview &lt;span aria-hidden="true"&gt;→&lt;/span&gt;&lt;/a&gt;
+          &lt;/section&gt;
+          &lt;aside class="workspace-login-aside"&gt;&lt;span class="workspace-kicker"&gt;BUILT FOR YOUR EVERYDAY&lt;/span&gt;&lt;h2&gt;A little less busy.&lt;br /&gt;A lot more focused.&lt;/h2&gt;&lt;p&gt;Your team, services, and account.&lt;br /&gt;Together in one thoughtful workspace.&lt;/p&gt;&lt;div class="workspace-login-lines" aria-hidden="true"&gt;&lt;/div&gt;&lt;small&gt;One identity. Every workspace.&lt;/small&gt;&lt;/aside&gt;
+        &lt;/main&gt;
+
+    &lt;/div&gt;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></section><details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">/* Application composition reference. Component visuals remain in @wrnexus/ui. */
+.workspace-preview <span>&#123;</span>
+  min-height: 100dvh;
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-bg);
+  font: 0.875rem/1.5 var(--wrn-font-sans);
+  -webkit-font-smoothing: antialiased;
+<span>&#125;</span>
+.workspace-preview a <span>&#123;</span>
+  text-decoration: none;
+<span>&#125;</span>
+.workspace-preview h1,
+.workspace-preview h2,
+.workspace-preview p <span>&#123;</span>
+  margin: 0;
+<span>&#125;</span>
+.workspace-topbar <span>&#123;</span>
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-brand,
+.workspace-topbar nav <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-brand <span>&#123;</span>
+  color: var(--wrn-color-text);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+<span>&#125;</span>
+.workspace-mark <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: var(--wrn-color-primary);
+  color: var(--wrn-color-primary-contrast);
+  font-size: 0.875rem;
+<span>&#125;</span>
+.workspace-preview-label <span>&#123;</span>
+  padding-left: 1rem;
+  border-left: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0;
+<span>&#125;</span>
+.workspace-topbar nav a <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-topbar button <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-surface);
+  cursor: pointer;
+<span>&#125;</span>
+.workspace-topbar button span <span>&#123;</span>
+  width: 18px;
+  height: 18px;
+<span>&#125;</span>
+.workspace-avatar <span>&#123;</span>
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: var(--wrn-color-primary-text);
+  background: var(--wrn-color-primary-soft);
+  font-size: 0.6875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-avatar--large <span>&#123;</span>
+  width: 40px;
+  height: 40px;
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-shell <span>&#123;</span>
+  display: grid;
+  grid-template-columns: 232px minmax(0, 1fr);
+  min-height: calc(100dvh - 64px);
+<span>&#125;</span>
+.workspace-sidebar <span>&#123;</span>
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1.5rem 1rem;
+  border-right: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-organization <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.5rem;
+<span>&#125;</span>
+.workspace-organization strong <span>&#123;</span>
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-organization small <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-sidebar nav <span>&#123;</span>
+  display: grid;
+  gap: 0.25rem;
+<span>&#125;</span>
+.workspace-nav-label <span>&#123;</span>
+  margin: 0 0.5rem 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+<span>&#125;</span>
+.workspace-sidebar nav a <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 38px;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-sidebar nav a span <span>&#123;</span>
+  width: 17px;
+  height: 17px;
+  flex: none;
+<span>&#125;</span>
+.workspace-sidebar nav a:hover <span>&#123;</span>
+  background: var(--wrn-color-surface-soft);
+  color: var(--wrn-color-text);
+<span>&#125;</span>
+.workspace-sidebar nav a[aria-current="page"] <span>&#123;</span>
+  background: var(--wrn-color-primary-soft);
+  color: var(--wrn-color-primary-text);
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-library-link <span>&#123;</span>
+  margin-top: auto;
+  padding: 1rem 0.5rem 0;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-main <span>&#123;</span>
+  width: 100%;
+  max-width: 1400px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 0;
+<span>&#125;</span>
+.workspace-main .wrn-page-header__inner <span>&#123;</span>
+  padding: 0 0 1.5rem;
+<span>&#125;</span>
+.workspace-welcome <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-welcome h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-welcome p <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-welcome &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+<span>&#125;</span>
+.workspace-metrics <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+  font-size: 1.5rem;
+<span>&#125;</span>
+.workspace-overview-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
+  gap: 1.5rem;
+<span>&#125;</span>
+.workspace-section <span>&#123;</span>
+  min-width: 0;
+  padding: 1.25rem;
+  background: var(--wrn-color-surface);
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-md);
+<span>&#125;</span>
+.workspace-section &gt; header <span>&#123;</span>
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+<span>&#125;</span>
+.workspace-preview h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+<span>&#125;</span>
+.workspace-section header p,
+.workspace-services header p <span>&#123;</span>
+  margin-top: 0.25rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status <span>&#123;</span>
+  white-space: nowrap;
+  border-radius: 4px;
+  padding: 0.25rem 0.375rem;
+  color: var(--wrn-color-muted);
+  background: var(--wrn-color-surface-soft);
+  font-size: 0.625rem;
+<span>&#125;</span>
+.workspace-steps &gt; div <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.9375rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-steps &gt; div:last-child <span>&#123;</span>
+  border-bottom: 0;
+  padding-bottom: 0;
+<span>&#125;</span>
+.workspace-steps strong <span>&#123;</span>
+  font-size: 0.8125rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-steps p <span>&#123;</span>
+  font-size: 0.6875rem;
+  color: var(--wrn-color-muted);
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-steps &gt; div &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+  flex-shrink: 0;
+<span>&#125;</span>
+.workspace-step-icon <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 50%;
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-step-icon--done <span>&#123;</span>
+  border-color: transparent;
+  color: var(--wrn-color-success-text);
+  background: var(--wrn-color-success-soft);
+<span>&#125;</span>
+.workspace-muted <span>&#123;</span>
+  font-size: 0.75rem;
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-icon <span>&#123;</span>
+  width: 20px;
+  height: 20px;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-status-list <span>&#123;</span>
+  margin: 0 0 1rem;
+<span>&#125;</span>
+.workspace-status-list div <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status-list dt <span>&#123;</span>
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-list dd <span>&#123;</span>
+  margin: 0;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-text-link <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-services <span>&#123;</span>
+  margin-top: 1.75rem;
+<span>&#125;</span>
+.workspace-services &gt; header <span>&#123;</span>
+  margin-bottom: 0.875rem;
+<span>&#125;</span>
+.workspace-service-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body h3 <span>&#123;</span>
+  font-size: 0.875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body p,
+.workspace-service-grid .wrn-next__card-action <span>&#123;</span>
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-footer <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1.5rem 0;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-settings <span>&#123;</span>
+  max-width: 960px;
+<span>&#125;</span>
+.workspace-settings-section <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
+  gap: 2rem;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-settings-section &gt; div &gt; p <span>&#123;</span>
+  margin-top: 0.375rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-fields <span>&#123;</span>
+  min-width: 0;
+  display: grid;
+  gap: 1.25rem;
+<span>&#125;</span>
+.workspace-field-row <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-settings-actions <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1.25rem;
+<span>&#125;</span>
+.workspace-settings-actions &gt; span <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
+  min-height: calc(100dvh - 64px);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-login-form <span>&#123;</span>
+  width: min(360px, calc(100% - 3rem));
+  align-self: center;
+  justify-self: center;
+  padding: 3rem 0;
+<span>&#125;</span>
+.workspace-login-form h1 <span>&#123;</span>
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  margin-top: 0.75rem;
+<span>&#125;</span>
+.workspace-login-form &gt; p <span>&#123;</span>
+  margin-top: 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-login-form form <span>&#123;</span>
+  display: grid;
+  gap: 1.25rem;
+  margin: 2rem 0 1.5rem;
+<span>&#125;</span>
+.workspace-login-form &gt; a <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-kicker <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+<span>&#125;</span>
+.workspace-login-aside <span>&#123;</span>
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: clamp(2rem, 4vw, 4rem);
+  color: #f0f1f4;
+  background: #181a20;
+<span>&#125;</span>
+.workspace-login-aside .workspace-kicker <span>&#123;</span>
+  color: #b5bac5;
+<span>&#125;</span>
+.workspace-login-aside h2 <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 3rem;
+  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+<span>&#125;</span>
+.workspace-login-aside p <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 1.25rem;
+  color: #b5bac5;
+  font-size: 0.875rem;
+  line-height: 1.7;
+<span>&#125;</span>
+.workspace-login-aside small <span>&#123;</span>
+  margin-top: auto;
+  padding-top: 3rem;
+  color: #b5bac5;
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login-lines <span>&#123;</span>
+  position: absolute;
+  width: 550px;
+  height: 550px;
+  border: 1px solid #ffffff12;
+  border-radius: 50%;
+  top: 35%;
+  left: 15%;
+  box-shadow:
+    0 0 0 40px #ffffff04,
+    0 0 0 80px #ffffff04,
+    0 0 0 120px #ffffff04;
+<span>&#125;</span>
+.workspace-feedback <span>&#123;</span>
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+@media (max-width: 1180px) <span>&#123;</span>
+  .workspace-metrics <span>&#123;</span>
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  <span>&#125;</span>
+  .workspace-overview-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 800px) <span>&#123;</span>
+  .workspace-shell <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-sidebar <span>&#123;</span>
+    border-right: 0;
+    border-bottom: 1px solid var(--wrn-color-border);
+    padding: 0.625rem 1rem;
+  <span>&#125;</span>
+  .workspace-sidebar nav <span>&#123;</span>
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+  <span>&#125;</span>
+  .workspace-sidebar nav a <span>&#123;</span>
+    white-space: nowrap;
+  <span>&#125;</span>
+  .workspace-nav-label,
+  .workspace-organization,
+  .workspace-library-link <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-main <span>&#123;</span>
+    padding: 1.5rem 1rem 0;
+  <span>&#125;</span>
+  .workspace-login <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-login-aside <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-service-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 540px) <span>&#123;</span>
+  .workspace-topbar <span>&#123;</span>
+    padding-inline: 1rem;
+  <span>&#125;</span>
+  .workspace-preview-label,
+  .workspace-topbar nav &gt; a <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-topbar nav <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-welcome <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-section &gt; header <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div &gt; :nth-child(2) <span>&#123;</span>
+    flex: 1;
+    min-width: 160px;
+  <span>&#125;</span>
+  .workspace-metrics <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-metrics .wrn-metric-card <span>&#123;</span>
+    padding: 0.875rem;
+  <span>&#125;</span>
+  .workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+    font-size: 1.25rem;
+  <span>&#125;</span>
+  .workspace-settings-section <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+  <span>&#125;</span>
+  .workspace-field-row <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-settings-actions <span>&#123;</span>
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></details>
+  }
+}

app/pages/preview/workspace.wrn

@@ -0,0 +1,623 @@
+// Composed reference using the shipped UI components.
+page DesignSystem {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>
+    <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="page"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span>Overview</a><a href="/preview/profile" aria-current="false"><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="Your workspace" description="Everything you need to keep moving, in one place." variant="minimal" borderBottom="false" maxWidth="full" />
+              <section class="workspace-welcome"><span class="workspace-avatar workspace-avatar--large">JD</span><div><h2>Good morning, Jamie</h2><p>Here’s what’s happening with your account.</p></div><Button label="Edit profile" href="/preview/profile" variant="secondary" size="sm" /></section>
+              <section class="workspace-metrics" aria-label="Account summary"><MetricCard label="Workspaces" value="3" description="One place for every project" hover="none" /><MetricCard label="Team members" value="12" description="Working better, together" hover="none" /><MetricCard label="Connected services" value="4" description="All services operational" hover="none" /><MetricCard label="Account security" value="Protected" description="Two-step verification enabled" hover="none" class="workspace-security-metric" /></section>
+              <div class="workspace-overview-grid">
+                <section class="workspace-section"><header><div><h2>Make yourself at home</h2><p>A few small steps to get your workspace ready.</p></div><span class="workspace-status">2 of 3 complete</span></header><div class="workspace-steps"><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Complete your profile</strong><p>Your team knows who you are.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Secure your account</strong><p>An extra layer of protection is enabled.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon">3</span><div><strong>Invite your team</strong><p>Bring the right people into your workspace.</p></div><Modal triggerLabel="Invite member" title="Invite a teammate" description="A shared workspace starts with your team." confirmLabel="Done" closeOnConfirm="true"><div class="workspace-fields"><Input id="invite-email" name="inviteEmail" type="email" label="Email address" placeholder="teammate@company.com" /><p class="workspace-muted">This is a design preview. No invitation will be sent.</p></div></Modal></div></div></section>
+                <section class="workspace-section"><header><div><h2>Account status</h2><p>A little peace of mind.</p></div><span class="icon-[lucide--shield-check] workspace-status-icon" aria-hidden="true"></span></header><dl class="workspace-status-list"><div><dt>Email address</dt><dd>Verified</dd></div><div><dt>Two-step verification</dt><dd>Enabled</dd></div><div><dt>Recovery method</dt><dd>Added</dd></div></dl><a class="workspace-text-link" href="/preview/profile">Manage your preferences <span aria-hidden="true">→</span></a></section>
+              </div>
+              <section class="workspace-services"><header><h2>Your services</h2><p>Simple tools for the work that matters.</p></header><div class="workspace-service-grid"><Card title="Business email" description="A professional inbox for every conversation." icon="icon-[lucide--mail]" actionLabel="Explore forms" actionHref="/forms" /><Card title="Team workspace" description="Keep your people and projects connected." icon="icon-[lucide--users]" actionLabel="Explore tables" actionHref="/components/data-table" /><Card title="Scheduling" description="Make room for your next great idea." icon="icon-[lucide--calendar-days]" actionLabel="Explore calendar" actionHref="/components/date-picker" /></div></section>
+            <footer class="workspace-footer"><span>© 2026 WRNexus</span><span>Sample workspace · Light &amp; dark preview</span></footer>
+          </main>
+        </div>
+
+    </div>␍<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">// Composed reference using the shipped UI components.
+page DesignSystem <span>&#123;</span>
+  state saved = false
+  seo <span>&#123;</span>
+    title = "Workspace example"
+  <span>&#125;</span>
+  view <span>&#123;</span>
+    &lt;div class="workspace-preview"&gt;
+      &lt;header class="workspace-topbar"&gt;
+        &lt;a class="workspace-brand" href="/preview/workspace"&gt;&lt;span class="workspace-mark"&gt;W&lt;/span&gt;WRNexus&lt;span class="workspace-preview-label"&gt;Example&lt;/span&gt;&lt;/a&gt;
+        &lt;nav aria-label="Preview tools"&gt;&lt;a href="/components/button"&gt;Components&lt;/a&gt;&lt;button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"&gt;&lt;span class="icon-[lucide--sun]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"&gt;&lt;span class="icon-[lucide--moon]" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;&lt;span class="workspace-avatar" aria-label="Sample user"&gt;JD&lt;/span&gt;&lt;/nav&gt;
+      &lt;/header&gt;
+        &lt;div class="workspace-shell"&gt;
+          &lt;aside class="workspace-sidebar"&gt;
+            &lt;div class="workspace-organization"&gt;&lt;span class="workspace-avatar"&gt;S&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Studio workspace&lt;/strong&gt;&lt;small&gt;Personal account&lt;/small&gt;&lt;/div&gt;&lt;/div&gt;
+            &lt;nav aria-label="Workspace preview"&gt;&lt;span class="workspace-nav-label"&gt;WORKSPACE&lt;/span&gt;&lt;a href="/preview/workspace" aria-current="page"&gt;&lt;span class="icon-[lucide--layout-dashboard]" aria-hidden="true"&gt;&lt;/span&gt;Overview&lt;/a&gt;&lt;a href="/preview/profile" aria-current="false"&gt;&lt;span class="icon-[lucide--user-round]" aria-hidden="true"&gt;&lt;/span&gt;Profile &amp;amp; preferences&lt;/a&gt;&lt;a href="/preview/sign-in"&gt;&lt;span class="icon-[lucide--log-in]" aria-hidden="true"&gt;&lt;/span&gt;Sign in preview&lt;/a&gt;&lt;/nav&gt;
+            &lt;a class="workspace-library-link" href="/"&gt;Browse component library &lt;span aria-hidden="true"&gt;↗&lt;/span&gt;&lt;/a&gt;
+          &lt;/aside&gt;
+          &lt;main class="workspace-main"&gt;
+
+              &lt;PageHeader title="Your workspace" description="Everything you need to keep moving, in one place." variant="minimal" borderBottom="false" maxWidth="full" /&gt;
+              &lt;section class="workspace-welcome"&gt;&lt;span class="workspace-avatar workspace-avatar--large"&gt;JD&lt;/span&gt;&lt;div&gt;&lt;h2&gt;Good morning, Jamie&lt;/h2&gt;&lt;p&gt;Here’s what’s happening with your account.&lt;/p&gt;&lt;/div&gt;&lt;Button label="Edit profile" href="/preview/profile" variant="secondary" size="sm" /&gt;&lt;/section&gt;
+              &lt;section class="workspace-metrics" aria-label="Account summary"&gt;&lt;MetricCard label="Workspaces" value="3" description="One place for every project" hover="none" /&gt;&lt;MetricCard label="Team members" value="12" description="Working better, together" hover="none" /&gt;&lt;MetricCard label="Connected services" value="4" description="All services operational" hover="none" /&gt;&lt;MetricCard label="Account security" value="Protected" description="Two-step verification enabled" hover="none" class="workspace-security-metric" /&gt;&lt;/section&gt;
+              &lt;div class="workspace-overview-grid"&gt;
+                &lt;section class="workspace-section"&gt;&lt;header&gt;&lt;div&gt;&lt;h2&gt;Make yourself at home&lt;/h2&gt;&lt;p&gt;A few small steps to get your workspace ready.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-status"&gt;2 of 3 complete&lt;/span&gt;&lt;/header&gt;&lt;div class="workspace-steps"&gt;&lt;div&gt;&lt;span class="workspace-step-icon workspace-step-icon--done"&gt;✓&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Complete your profile&lt;/strong&gt;&lt;p&gt;Your team knows who you are.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-muted"&gt;Done&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="workspace-step-icon workspace-step-icon--done"&gt;✓&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Secure your account&lt;/strong&gt;&lt;p&gt;An extra layer of protection is enabled.&lt;/p&gt;&lt;/div&gt;&lt;span class="workspace-muted"&gt;Done&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="workspace-step-icon"&gt;3&lt;/span&gt;&lt;div&gt;&lt;strong&gt;Invite your team&lt;/strong&gt;&lt;p&gt;Bring the right people into your workspace.&lt;/p&gt;&lt;/div&gt;&lt;Modal triggerLabel="Invite member" title="Invite a teammate" description="A shared workspace starts with your team." confirmLabel="Done" closeOnConfirm="true"&gt;&lt;div class="workspace-fields"&gt;&lt;Input id="invite-email" name="inviteEmail" type="email" label="Email address" placeholder="teammate@company.com" /&gt;&lt;p class="workspace-muted"&gt;This is a design preview. No invitation will be sent.&lt;/p&gt;&lt;/div&gt;&lt;/Modal&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
+                &lt;section class="workspace-section"&gt;&lt;header&gt;&lt;div&gt;&lt;h2&gt;Account status&lt;/h2&gt;&lt;p&gt;A little peace of mind.&lt;/p&gt;&lt;/div&gt;&lt;span class="icon-[lucide--shield-check] workspace-status-icon" aria-hidden="true"&gt;&lt;/span&gt;&lt;/header&gt;&lt;dl class="workspace-status-list"&gt;&lt;div&gt;&lt;dt&gt;Email address&lt;/dt&gt;&lt;dd&gt;Verified&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Two-step verification&lt;/dt&gt;&lt;dd&gt;Enabled&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Recovery method&lt;/dt&gt;&lt;dd&gt;Added&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;a class="workspace-text-link" href="/preview/profile"&gt;Manage your preferences &lt;span aria-hidden="true"&gt;→&lt;/span&gt;&lt;/a&gt;&lt;/section&gt;
+              &lt;/div&gt;
+              &lt;section class="workspace-services"&gt;&lt;header&gt;&lt;h2&gt;Your services&lt;/h2&gt;&lt;p&gt;Simple tools for the work that matters.&lt;/p&gt;&lt;/header&gt;&lt;div class="workspace-service-grid"&gt;&lt;Card title="Business email" description="A professional inbox for every conversation." icon="icon-[lucide--mail]" actionLabel="Explore forms" actionHref="/forms" /&gt;&lt;Card title="Team workspace" description="Keep your people and projects connected." icon="icon-[lucide--users]" actionLabel="Explore tables" actionHref="/components/data-table" /&gt;&lt;Card title="Scheduling" description="Make room for your next great idea." icon="icon-[lucide--calendar-days]" actionLabel="Explore calendar" actionHref="/components/date-picker" /&gt;&lt;/div&gt;&lt;/section&gt;
+            &lt;footer class="workspace-footer"&gt;&lt;span&gt;© 2026 WRNexus&lt;/span&gt;&lt;span&gt;Sample workspace · Light &amp;amp; dark preview&lt;/span&gt;&lt;/footer&gt;
+          &lt;/main&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></section><details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">/* Application composition reference. Component visuals remain in @wrnexus/ui. */
+.workspace-preview <span>&#123;</span>
+  min-height: 100dvh;
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-bg);
+  font: 0.875rem/1.5 var(--wrn-font-sans);
+  -webkit-font-smoothing: antialiased;
+<span>&#125;</span>
+.workspace-preview a <span>&#123;</span>
+  text-decoration: none;
+<span>&#125;</span>
+.workspace-preview h1,
+.workspace-preview h2,
+.workspace-preview p <span>&#123;</span>
+  margin: 0;
+<span>&#125;</span>
+.workspace-topbar <span>&#123;</span>
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-brand,
+.workspace-topbar nav <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-brand <span>&#123;</span>
+  color: var(--wrn-color-text);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+<span>&#125;</span>
+.workspace-mark <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: var(--wrn-color-primary);
+  color: var(--wrn-color-primary-contrast);
+  font-size: 0.875rem;
+<span>&#125;</span>
+.workspace-preview-label <span>&#123;</span>
+  padding-left: 1rem;
+  border-left: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0;
+<span>&#125;</span>
+.workspace-topbar nav a <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-topbar button <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-text);
+  background: var(--wrn-color-surface);
+  cursor: pointer;
+<span>&#125;</span>
+.workspace-topbar button span <span>&#123;</span>
+  width: 18px;
+  height: 18px;
+<span>&#125;</span>
+.workspace-avatar <span>&#123;</span>
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: var(--wrn-color-primary-text);
+  background: var(--wrn-color-primary-soft);
+  font-size: 0.6875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-avatar--large <span>&#123;</span>
+  width: 40px;
+  height: 40px;
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-shell <span>&#123;</span>
+  display: grid;
+  grid-template-columns: 232px minmax(0, 1fr);
+  min-height: calc(100dvh - 64px);
+<span>&#125;</span>
+.workspace-sidebar <span>&#123;</span>
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1.5rem 1rem;
+  border-right: 1px solid var(--wrn-color-border);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-organization <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.5rem;
+<span>&#125;</span>
+.workspace-organization strong <span>&#123;</span>
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-organization small <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-sidebar nav <span>&#123;</span>
+  display: grid;
+  gap: 0.25rem;
+<span>&#125;</span>
+.workspace-nav-label <span>&#123;</span>
+  margin: 0 0.5rem 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+<span>&#125;</span>
+.workspace-sidebar nav a <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 38px;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--wrn-radius-sm);
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-sidebar nav a span <span>&#123;</span>
+  width: 17px;
+  height: 17px;
+  flex: none;
+<span>&#125;</span>
+.workspace-sidebar nav a:hover <span>&#123;</span>
+  background: var(--wrn-color-surface-soft);
+  color: var(--wrn-color-text);
+<span>&#125;</span>
+.workspace-sidebar nav a[aria-current="page"] <span>&#123;</span>
+  background: var(--wrn-color-primary-soft);
+  color: var(--wrn-color-primary-text);
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-library-link <span>&#123;</span>
+  margin-top: auto;
+  padding: 1rem 0.5rem 0;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-main <span>&#123;</span>
+  width: 100%;
+  max-width: 1400px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 0;
+<span>&#125;</span>
+.workspace-main .wrn-page-header__inner <span>&#123;</span>
+  padding: 0 0 1.5rem;
+<span>&#125;</span>
+.workspace-welcome <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-welcome h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-welcome p <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-welcome &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+<span>&#125;</span>
+.workspace-metrics <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+<span>&#125;</span>
+.workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+  font-size: 1.5rem;
+<span>&#125;</span>
+.workspace-overview-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
+  gap: 1.5rem;
+<span>&#125;</span>
+.workspace-section <span>&#123;</span>
+  min-width: 0;
+  padding: 1.25rem;
+  background: var(--wrn-color-surface);
+  border: 1px solid var(--wrn-color-border);
+  border-radius: var(--wrn-radius-md);
+<span>&#125;</span>
+.workspace-section &gt; header <span>&#123;</span>
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+<span>&#125;</span>
+.workspace-preview h2 <span>&#123;</span>
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+<span>&#125;</span>
+.workspace-section header p,
+.workspace-services header p <span>&#123;</span>
+  margin-top: 0.25rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status <span>&#123;</span>
+  white-space: nowrap;
+  border-radius: 4px;
+  padding: 0.25rem 0.375rem;
+  color: var(--wrn-color-muted);
+  background: var(--wrn-color-surface-soft);
+  font-size: 0.625rem;
+<span>&#125;</span>
+.workspace-steps &gt; div <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.9375rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-steps &gt; div:last-child <span>&#123;</span>
+  border-bottom: 0;
+  padding-bottom: 0;
+<span>&#125;</span>
+.workspace-steps strong <span>&#123;</span>
+  font-size: 0.8125rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-steps p <span>&#123;</span>
+  font-size: 0.6875rem;
+  color: var(--wrn-color-muted);
+  margin-top: 0.125rem;
+<span>&#125;</span>
+.workspace-steps &gt; div &gt; :last-child <span>&#123;</span>
+  margin-left: auto;
+  flex-shrink: 0;
+<span>&#125;</span>
+.workspace-step-icon <span>&#123;</span>
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 50%;
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-step-icon--done <span>&#123;</span>
+  border-color: transparent;
+  color: var(--wrn-color-success-text);
+  background: var(--wrn-color-success-soft);
+<span>&#125;</span>
+.workspace-muted <span>&#123;</span>
+  font-size: 0.75rem;
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-icon <span>&#123;</span>
+  width: 20px;
+  height: 20px;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-status-list <span>&#123;</span>
+  margin: 0 0 1rem;
+<span>&#125;</span>
+.workspace-status-list div <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-status-list dt <span>&#123;</span>
+  color: var(--wrn-color-muted);
+<span>&#125;</span>
+.workspace-status-list dd <span>&#123;</span>
+  margin: 0;
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+.workspace-text-link <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+<span>&#125;</span>
+.workspace-services <span>&#123;</span>
+  margin-top: 1.75rem;
+<span>&#125;</span>
+.workspace-services &gt; header <span>&#123;</span>
+  margin-bottom: 0.875rem;
+<span>&#125;</span>
+.workspace-service-grid <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body h3 <span>&#123;</span>
+  font-size: 0.875rem;
+  font-weight: 600;
+<span>&#125;</span>
+.workspace-service-grid .wrn-next__card-body p,
+.workspace-service-grid .wrn-next__card-action <span>&#123;</span>
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-footer <span>&#123;</span>
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1.5rem 0;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-muted);
+  font-size: 0.6875rem;
+<span>&#125;</span>
+.workspace-settings <span>&#123;</span>
+  max-width: 960px;
+<span>&#125;</span>
+.workspace-settings-section <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
+  gap: 2rem;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--wrn-color-border);
+<span>&#125;</span>
+.workspace-settings-section &gt; div &gt; p <span>&#123;</span>
+  margin-top: 0.375rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-fields <span>&#123;</span>
+  min-width: 0;
+  display: grid;
+  gap: 1.25rem;
+<span>&#125;</span>
+.workspace-field-row <span>&#123;</span>
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+<span>&#125;</span>
+.workspace-settings-actions <span>&#123;</span>
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1.25rem;
+<span>&#125;</span>
+.workspace-settings-actions &gt; span <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login <span>&#123;</span>
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
+  min-height: calc(100dvh - 64px);
+  background: var(--wrn-color-surface);
+<span>&#125;</span>
+.workspace-login-form <span>&#123;</span>
+  width: min(360px, calc(100% - 3rem));
+  align-self: center;
+  justify-self: center;
+  padding: 3rem 0;
+<span>&#125;</span>
+.workspace-login-form h1 <span>&#123;</span>
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  margin-top: 0.75rem;
+<span>&#125;</span>
+.workspace-login-form &gt; p <span>&#123;</span>
+  margin-top: 0.5rem;
+  color: var(--wrn-color-muted);
+  font-size: 0.8125rem;
+<span>&#125;</span>
+.workspace-login-form form <span>&#123;</span>
+  display: grid;
+  gap: 1.25rem;
+  margin: 2rem 0 1.5rem;
+<span>&#125;</span>
+.workspace-login-form &gt; a <span>&#123;</span>
+  color: var(--wrn-color-primary-text);
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-kicker <span>&#123;</span>
+  color: var(--wrn-color-muted);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+<span>&#125;</span>
+.workspace-login-aside <span>&#123;</span>
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: clamp(2rem, 4vw, 4rem);
+  color: #f0f1f4;
+  background: #181a20;
+<span>&#125;</span>
+.workspace-login-aside .workspace-kicker <span>&#123;</span>
+  color: #b5bac5;
+<span>&#125;</span>
+.workspace-login-aside h2 <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 3rem;
+  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: -0.04em;
+<span>&#125;</span>
+.workspace-login-aside p <span>&#123;</span>
+  position: relative;
+  z-index: 1;
+  margin-top: 1.25rem;
+  color: #b5bac5;
+  font-size: 0.875rem;
+  line-height: 1.7;
+<span>&#125;</span>
+.workspace-login-aside small <span>&#123;</span>
+  margin-top: auto;
+  padding-top: 3rem;
+  color: #b5bac5;
+  font-size: 0.75rem;
+<span>&#125;</span>
+.workspace-login-lines <span>&#123;</span>
+  position: absolute;
+  width: 550px;
+  height: 550px;
+  border: 1px solid #ffffff12;
+  border-radius: 50%;
+  top: 35%;
+  left: 15%;
+  box-shadow:
+    0 0 0 40px #ffffff04,
+    0 0 0 80px #ffffff04,
+    0 0 0 120px #ffffff04;
+<span>&#125;</span>
+.workspace-feedback <span>&#123;</span>
+  color: var(--wrn-color-success-text);
+<span>&#125;</span>
+@media (max-width: 1180px) <span>&#123;</span>
+  .workspace-metrics <span>&#123;</span>
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  <span>&#125;</span>
+  .workspace-overview-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 800px) <span>&#123;</span>
+  .workspace-shell <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-sidebar <span>&#123;</span>
+    border-right: 0;
+    border-bottom: 1px solid var(--wrn-color-border);
+    padding: 0.625rem 1rem;
+  <span>&#125;</span>
+  .workspace-sidebar nav <span>&#123;</span>
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: none;
+  <span>&#125;</span>
+  .workspace-sidebar nav a <span>&#123;</span>
+    white-space: nowrap;
+  <span>&#125;</span>
+  .workspace-nav-label,
+  .workspace-organization,
+  .workspace-library-link <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-main <span>&#123;</span>
+    padding: 1.5rem 1rem 0;
+  <span>&#125;</span>
+  .workspace-login <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-login-aside <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-service-grid <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+<span>&#125;</span>
+@media (max-width: 540px) <span>&#123;</span>
+  .workspace-topbar <span>&#123;</span>
+    padding-inline: 1rem;
+  <span>&#125;</span>
+  .workspace-preview-label,
+  .workspace-topbar nav &gt; a <span>&#123;</span>
+    display: none;
+  <span>&#125;</span>
+  .workspace-topbar nav <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-welcome <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-section &gt; header <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div <span>&#123;</span>
+    flex-wrap: wrap;
+  <span>&#125;</span>
+  .workspace-steps &gt; div &gt; :nth-child(2) <span>&#123;</span>
+    flex: 1;
+    min-width: 160px;
+  <span>&#125;</span>
+  .workspace-metrics <span>&#123;</span>
+    gap: 0.625rem;
+  <span>&#125;</span>
+  .workspace-metrics .wrn-metric-card <span>&#123;</span>
+    padding: 0.875rem;
+  <span>&#125;</span>
+  .workspace-security-metric .wrn-metric-card__value <span>&#123;</span>
+    font-size: 1.25rem;
+  <span>&#125;</span>
+  .workspace-settings-section <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+  <span>&#125;</span>
+  .workspace-field-row <span>&#123;</span>
+    grid-template-columns: minmax(0, 1fr);
+  <span>&#125;</span>
+  .workspace-settings-actions <span>&#123;</span>
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  <span>&#125;</span>
+<span>&#125;</span>
+</code></pre></details>
+  }
+}